/* ==========================================================================
   Apex Cognition — Design Tokens
   Single source of truth for color, type, space, motion.
   Contrast ratios in comments are computed against --bg (#0A0B0D).
   ========================================================================== */

:root {
  /* --- Surface ------------------------------------------------------- */
  --bg:            #0A0B0D;   /* near-black, never pure #000 */
  --bg-raised:     #101216;   /* cards, panels */
  --bg-sunken:     #070809;   /* quiet sections (founder story) */
  --bg-overlay:    rgba(16, 18, 22, 0.72);

  --line:          rgba(242, 242, 240, 0.10);  /* hairline borders */
  --line-strong:   rgba(242, 242, 240, 0.18);

  /* --- Text ---------------------------------------------------------- */
  --text:          #F2F2F0;   /* 17.6:1 — body + headings */
  --text-dim:      #9BA0A8;   /*  7.5:1 — captions, small print */
  /* The quietest text on the page. Still clears AA (4.7:1 on raised panels,
     5.0:1 on the page background) because it carries real content — the FDA
     disclaimer, the founder's individual-results caveat, the spot counts. */
  --text-faint:    #7A808A;

  /* --- Accents ------------------------------------------------------- */
  --accent:        #7C6FF0;   /*  5.05:1 — CTA fills, node highlights */
  --accent-text:   #A99BFF;   /*  8.3:1  — violet used AS TEXT at small sizes */
  --accent-deep:   #5B4FD0;   /* pressed / darker edge */
  --accent-2:      #5EEAD4;   /* 11.4:1 — secondary tint, Logging input */
  --accent-2-deep: #2BB8A3;
  --accent-3:      #FF7A45;   /*  7.6:1 — amber: VIP tier, warnings, lab callouts. SPARING. */
  --accent-3-deep: #D9542A;

  /* Text color that sits ON a solid --accent fill.
     #F2F2F0 on #7C6FF0 is only 3.4:1 and FAILS AA — near-black is 5.05:1. */
  --on-accent:     #0A0B0D;

  /* --- State identity tints — all in-palette, all AA-verified -------- */
  /* The four states are the spine of the page: they tint the hero chips, the
     lineup blocks, the per-state canvases, the convergence circuit and the
     brain itself. One definition here keeps CSS and canvas from disagreeing —
     js/config.js STATES reference these by custom-property name. */
  --state-core:  #8FA3C8;  /* steel — the daily baseline */
  --state-focus: #7C6FF0;  /* violet — the flagship state */
  --state-push:  #FF7A45;  /* amber — heat and output */
  --state-wind:  #5EEAD4;  /* teal — cool, slowing down */

  /* Legacy aliases from when these were "converging inputs" rather than
     states. Kept so the convergence circuit keeps rendering during the
     refactor; remove once nothing references --input-*. */
  --input-demographics: var(--state-core);
  --input-genetics:     var(--state-focus);
  --input-labs:         var(--state-push);
  --input-logging:      var(--state-wind);

  /* --- Glows --------------------------------------------------------- */
  --glow-accent:   0 0 0 1px rgba(124, 111, 240, 0.30), 0 0 32px -8px rgba(124, 111, 240, 0.55);
  --glow-amber:    0 0 0 1px rgba(255, 122, 69, 0.30), 0 0 32px -8px rgba(255, 122, 69, 0.50);
  --glow-soft:     0 1px 0 0 rgba(242, 242, 240, 0.05) inset, 0 24px 48px -24px rgba(0, 0, 0, 0.9);

  /* --- Typography ---------------------------------------------------- */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Fluid type scale — clamp(min, preferred, max) */
  /* The hero can run big again now the copy is short ("Supercharge" over
     "your ___"). The binding constraint is the ENTRANCE, not the settled
     text: at peak letter-spacing "Supercharge" is ~1.5x its settled width,
     and we want that to stay on screen. Measured ceiling at 1280 is 150px;
     this lands ~112px. Settled text has enormous headroom at every width. */
  --fs-hero:   clamp(2.5rem, 1.0rem + 7.5vw, 8rem);
  --fs-h2:     clamp(2.0rem,  1.3rem + 3.0vw, 3.5rem);
  --fs-h3:     clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  --fs-lead:   clamp(1.0625rem, 1.0rem + 0.5vw, 1.375rem);
  --fs-body:   1.0625rem;
  --fs-sm:     0.9375rem;
  --fs-xs:     0.8125rem;
  --fs-mono-label: 0.75rem;

  --lh-tight:  1.02;
  --lh-snug:   1.18;
  --lh-normal: 1.6;
  --lh-loose:  1.75;

  --tracking-display: -0.03em;
  --tracking-label:    0.16em;   /* mono eyebrow labels */

  /* --- Space --------------------------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  --section-pad-y: clamp(5rem, 10vh, 9rem);
  --gutter:        clamp(1.25rem, 4vw, 3rem);
  --measure:       68ch;   /* readable line length */
  --content-max:   1240px;
  --content-wide:  1440px;

  /* --- Radii --------------------------------------------------------- */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* --- Motion -------------------------------------------------------- */
  /* Precise and mechanical. No bounce, no elastic, no overshoot. */
  --ease:      cubic-bezier(0.16, 0.84, 0.44, 1);
  --ease-in:   cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --dur-fast:  200ms;
  --dur-mid:   400ms;
  --dur-slow:  800ms;
  --dur-xslow: 1400ms;

  /* --- Layers -------------------------------------------------------- */
  --z-canvas:    0;
  --z-content:   1;
  --z-sticky:   50;
  --z-header:   60;
  --z-skiplink: 100;

  /* --- Texture ------------------------------------------------------- */
  /* Grain via inline SVG feTurbulence — no extra network request. */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");

  /* Higher-contrast variant for glows on near-black backgrounds — meant to be
     blended with `screen`, not `overlay` (overlay is nearly invisible on
     backgrounds this dark). Coarser tile, higher-contrast turbulence. */
  --noise-glow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' amplitude='1' exponent='0.5' offset='0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");

  /* Halftone dot grid for raised panels (Science / Pricing). */
  --halftone: radial-gradient(circle at center, rgba(242, 242, 240, 0.055) 1px, transparent 1.2px);
  --halftone-size: 14px 14px;
}