/* ============================================================
   FOUNDER ENGINE — design-tokens.css
   SINGLE SOURCE OF TRUTH for the whole site.
   Three-layer token system: Primitive -> Semantic -> Component.
   Every page imports this first. No cyan, no glassmorphism, no orbs.
   Brand: Navy #00263E · Sky #007DB4 · Gold #F5A800 · Granite · Stone.
   Fonts: Clash Display (display) + Atkinson Hyperlegible (body).
   ============================================================ */

/* ----------------------------------------------------------
   FONTS  (Fontshare Clash Display + Google Atkinson + OpenDyslexic a11y)
   Import here so a single link to this file wires the whole type system.
   ---------------------------------------------------------- */
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap');
@import url('https://fonts.cdnfonts.com/css/opendyslexic');

:root{
  /* ========== LAYER 1 — PRIMITIVES (raw brand values) ========== */
  --fe-navy:        #00263E;
  --fe-navy-deep:   #001A2E;
  --fe-navy-mid:    #002b48;
  --fe-sky:         #007DB4;
  --fe-sky-bright:  #33A9E0;
  --fe-gold:        #F5A800;
  --fe-gold-bright: #ffc23d;
  --fe-granite:     #4E738A;
  --fe-stone:       #A5BAC9;
  --fe-body:        #CBD7E2;
  --fe-white:       #FFFFFF;
  /* data-viz only (never chrome) */
  --fe-viz-grey:    #646f78;
  --fe-viz-red:     #ff5a5f;

  /* surface fills, derived from navy (replaces the old 3%-white glass) */
  --fe-surface-1:   rgba(10,30,52,.55);
  --fe-surface-2:   rgba(10,30,52,.40);
  --fe-hairline:    rgba(78,115,138,.25);
  --fe-hairline-2:  rgba(78,115,138,.18);

  /* fonts */
  --fe-display: 'Clash Display', system-ui, sans-serif;
  --fe-text:    'Atkinson Hyperlegible', system-ui, sans-serif;

  /* spacing / radius / motion */
  --fe-r-sm: 8px;  --fe-r-md: 12px; --fe-r-lg: 16px; --fe-r-xl: 18px;
  --fe-nav-h: 104px;
  --fe-shadow-gold: 0 10px 34px rgba(245,168,0,.28);
  --fe-shadow-gold-hi: 0 16px 44px rgba(245,168,0,.42);
  --fe-ease: .25s cubic-bezier(.4,0,.2,1);

  /* ========== LAYER 2 — SEMANTIC (purpose aliases) ========== */
  --color-bg:        var(--fe-navy);
  --color-bg-deep:   var(--fe-navy-deep);
  --surface:         var(--fe-surface-1);
  --surface-quiet:   var(--fe-surface-2);
  --border:          var(--fe-hairline);
  --border-quiet:    var(--fe-hairline-2);

  --text-strong:     var(--fe-white);
  --text-body:       var(--fe-body);
  --text-muted:      var(--fe-stone);
  --text-faint:      var(--fe-granite);

  --accent:          var(--fe-gold);      /* THE pop — CTAs, key stats */
  --accent-hi:       var(--fe-gold-bright);
  --brand:           var(--fe-sky);       /* structural blue */
  --brand-hi:        var(--fe-sky-bright);
  --link:            var(--fe-sky-bright);

  /* ========== LAYER 3 — COMPONENT ========== */
  --btn-primary-bg:  var(--accent);
  --btn-primary-fg:  var(--color-bg-deep);
  --card-bg:         var(--surface);
  --card-border:     var(--border);
  --nav-bg-scrolled: rgba(0,26,46,.92);

  /* ---- Compatibility aliases ----
     Short names used by the flagship pages (index.html, os.html,
     growth-skunkworks.html, market-xray.html). Keep these so those
     pages can drop their duplicated :root and rely on this file. */
  --navy:var(--fe-navy); --navy-deep:var(--fe-navy-deep);
  --sky:var(--fe-sky); --sky-bright:var(--fe-sky-bright);
  --gold:var(--fe-gold); --granite:var(--fe-granite);
  --stone:var(--fe-stone); --body:var(--fe-body); --white:var(--fe-white);
  --display:var(--fe-display); --text:var(--fe-text);
  /* legacy near-black navy names from old styles.css */
  --navy-950:var(--fe-navy-deep); --navy-900:var(--fe-navy); --navy-800:var(--fe-navy-mid);
  --accent-dark:var(--fe-sky);
}

/* ----------------------------------------------------------
   RESET + PAGE SHELL  (shared by every page)
   ---------------------------------------------------------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
body{
  font-family:var(--fe-text);
  color:var(--text-strong);
  overflow-x:hidden;
  background:
    radial-gradient(120% 80% at 80% 18%, rgba(0,125,180,.18) 0%, transparent 55%),
    radial-gradient(90% 70% at 85% 82%, rgba(245,168,0,.09) 0%, transparent 50%),
    linear-gradient(168deg, var(--color-bg-deep) 0%, var(--color-bg) 52%, var(--fe-navy-mid) 100%);
  background-attachment:fixed;
  line-height:1.6;
}
.section{position:relative;z-index:2}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}

/* particle-network canvas layer */
#net{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}

h1,h2,h3,h4{font-family:var(--fe-display);font-weight:600;letter-spacing:-.015em;color:var(--text-strong);line-height:1.05}
a{color:var(--link);text-decoration:none;transition:color .2s}

/* emphasis spans */
.g{color:var(--accent)}
.muted2{color:var(--text-muted)}
.bx{font-weight:700;color:#fff}

/* ----------------------------------------------------------
   KICKER / OVERLINE
   ---------------------------------------------------------- */
.kicker,.overline{font-family:var(--fe-text);font-weight:700;font-size:.8rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brand-hi);margin-bottom:16px}

/* ----------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------- */
.btn{font-family:var(--fe-text);font-weight:700;font-size:.98rem;text-decoration:none;border-radius:10px;
  padding:16px 28px;display:inline-flex;align-items:center;gap:10px;cursor:pointer;border:none;
  transition:transform .2s,box-shadow .2s,background .2s,border-color .2s}
.btn-primary{background:var(--btn-primary-bg);color:var(--btn-primary-fg);box-shadow:var(--fe-shadow-gold)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--fe-shadow-gold-hi);background:var(--accent-hi)}
.btn-ghost{color:#fff;border:1px solid rgba(165,186,201,.35);background:transparent}
.btn-ghost:hover{border-color:var(--text-muted);background:rgba(165,186,201,.08)}

/* ----------------------------------------------------------
   NAV  (shared)
   ---------------------------------------------------------- */
nav.fe-nav{position:fixed;top:0;left:0;right:0;height:var(--fe-nav-h);z-index:30;display:flex;
  align-items:center;justify-content:space-between;gap:16px;padding:0 clamp(18px,5vw,64px);
  background:rgba(0,26,46,0);backdrop-filter:blur(0);transition:.3s;border-bottom:1px solid transparent}
nav.fe-nav.scrolled{background:var(--nav-bg-scrolled);backdrop-filter:blur(12px);border-bottom-color:rgba(78,115,138,.25)}
.fe-nav .brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;flex-shrink:0}
.fe-nav .brand img{height:68px;width:auto;display:block}
.fe-nav .brand span{font-family:var(--fe-display);font-weight:600;font-size:1.25rem;letter-spacing:.01em}
.fe-nav .nav-right{display:flex;align-items:center;gap:18px}
.fe-nav .nav-link{font-weight:600;font-size:.84rem;color:var(--text-muted);white-space:nowrap}
.fe-nav .nav-link:hover{color:#fff}
.nav-cta{font-weight:700;font-size:.86rem;color:#fff;padding:10px 18px;border:1px solid rgba(51,169,224,.5);
  border-radius:8px;transition:var(--fe-ease);white-space:nowrap}
.nav-cta:hover{border-color:var(--brand-hi);background:rgba(51,169,224,.12)}
.nav-cta.xray{background:var(--accent);color:var(--color-bg-deep);border-color:var(--accent)}
.nav-cta.xray:hover{background:var(--accent-hi);border-color:var(--accent-hi)}

/* ----------------------------------------------------------
   CARDS  (replaces .glass-card / .bento-card slop)
   ---------------------------------------------------------- */
.card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--fe-r-lg);
  padding:32px;transition:transform .25s,border-color .25s,box-shadow .25s}
.card:hover{transform:translateY(-6px);border-color:rgba(0,125,180,.6);
  box-shadow:0 0 0 1px rgba(0,125,180,.35),0 18px 50px rgba(0,125,180,.14)}
.card.featured{border-color:rgba(245,168,0,.5)}
.card .tag{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
  display:inline-block;margin-bottom:14px}
.card .tag.soon{color:var(--text-faint)}

/* ----------------------------------------------------------
   FORMS  (on-brand; replaces cyan-focus inputs)
   ---------------------------------------------------------- */
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:.9rem;font-weight:700;color:#fff;margin-bottom:8px}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:13px 16px;font-family:var(--fe-text);
  font-size:1rem;color:#fff;background:rgba(10,30,52,.55);border:1px solid rgba(78,115,138,.4);
  border-radius:var(--fe-r-sm);outline:none;transition:border-color .2s,box-shadow .2s}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{
  border-color:var(--brand-hi);box-shadow:0 0 0 3px rgba(51,169,224,.15)}
.form-group input::placeholder,.form-group textarea::placeholder{color:rgba(165,186,201,.5)}
.optional{color:var(--text-faint);font-weight:400}

/* ----------------------------------------------------------
   FOOTER  (shared)
   ---------------------------------------------------------- */
footer.fe-footer{max-width:1180px;margin:0 auto;padding:80px clamp(20px,5vw,64px) 100px;text-align:center;
  border-top:1px solid var(--border-quiet)}
footer.fe-footer h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:26px}

/* ----------------------------------------------------------
   ACCESSIBILITY TOGGLES  (Dyslexic + ADHD)  — shared behaviour
   ---------------------------------------------------------- */
.a11y{display:flex;gap:6px}
.a11y-btn{font-family:var(--fe-text);font-weight:700;font-size:.74rem;letter-spacing:.04em;color:var(--text-muted);
  background:transparent;border:1px solid rgba(78,115,138,.45);border-radius:7px;padding:7px 12px;cursor:pointer;transition:all .2s}
.a11y-btn:hover{color:#fff;border-color:var(--text-muted)}
.a11y-btn[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.a11y-btn.adhd[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--color-bg-deep)}
body.dyslexic{font-family:'OpenDyslexic',var(--fe-text);letter-spacing:.012em;word-spacing:.07em;line-height:1.9}
body.dyslexic h1,body.dyslexic h2,body.dyslexic h3,body.dyslexic .brand span{font-family:'OpenDyslexic',var(--fe-display);letter-spacing:0}

/* custom scrollbar */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--color-bg-deep)}
::-webkit-scrollbar-thumb{background:rgba(78,115,138,.4);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(78,115,138,.6)}

/* ----------------------------------------------------------
   SCROLL REVEAL  (applied by fe-brand.js; content stays visible if JS off)
   ---------------------------------------------------------- */
.fe-reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.fe-reveal.fe-in{opacity:1;transform:none}

/* ----------------------------------------------------------
   HERO ENTRANCE  (staggered page-load rise — pure CSS)
   Add class "fe-stagger" to a container; direct children rise in order.
   ---------------------------------------------------------- */
@keyframes fe-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.fe-stagger>*{opacity:0;animation:fe-rise .8s cubic-bezier(.2,.7,.2,1) forwards}
.fe-stagger>*:nth-child(1){animation-delay:.05s}
.fe-stagger>*:nth-child(2){animation-delay:.18s}
.fe-stagger>*:nth-child(3){animation-delay:.32s}
.fe-stagger>*:nth-child(4){animation-delay:.46s}
.fe-stagger>*:nth-child(5){animation-delay:.6s}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .fe-reveal{opacity:1;transform:none}
  .fe-stagger>*{opacity:1;animation:none}
}

/* shared mobile nav collapse */
@media(max-width:900px){
  .fe-nav .brand span{display:none}
  .fe-nav .nav-link{display:none}
  .fe-nav .brand img{height:50px}
  nav.fe-nav{height:88px}
  .a11y-btn{padding:7px 9px;font-size:.7rem;min-height:44px;display:inline-flex;align-items:center}
  .fe-nav .nav-right{gap:10px}
  .nav-cta{font-size:.74rem;padding:8px 12px;min-height:44px;display:inline-flex;align-items:center}
}