/* ============================================================
   ANOVA PROJECTS — Design Tokens
   Derived from: "Website Asset Map — Dark Brand Direction B"
   Single source of truth. Never hardcode raw values elsewhere.
   ============================================================ */

:root {
  /* ---------- Core palette (asset map 03. COLOR SYSTEM) ---------- */
  --anova-void:   #0A0F14;
  --anova-moon:   #151C26;
  --anova-silver: #B9C2CC;
  --anova-ice:    #22D0EE;
  --anova-steel:  #3A4656;

  /* Field lines read very dark on the page ground; the hero and other
     large graphics use the brighter step so the geometry stays legible. */
  --field-line:        var(--anova-steel);
  --field-line-strong: #55677E;

  /* ---------- Backgrounds ---------- */
  --bg:            #080C11;  /* page ground, one step below Void for depth */
  --bg-void:       var(--anova-void);
  --bg-well:       #06090D;  /* recessed bands, footer */
  --bg-surface:    #0D131B;  /* cards, panels */
  --bg-surface-2:  var(--anova-moon); /* elevated / hover */
  --bg-inset:      #0A1017;  /* inputs, code, wells inside cards */
  --bg-scrim:      rgba(8, 12, 17, .82);

  /* ---------- Borders / hairlines ---------- */
  --border:          rgba(58, 70, 86, .48);
  --border-soft:     rgba(58, 70, 86, .28);
  --border-strong:   rgba(58, 70, 86, .85);
  --border-accent:   rgba(34, 208, 238, .45);
  --hairline:        rgba(185, 194, 204, .09);

  /* ---------- Text ---------- */
  --text:        #EEF3F8;  /* cool white */
  --text-strong: #FFFFFF;
  --text-2:      var(--anova-silver);
  --text-3:      #909BA8;  /* muted steel-silver — AA on every surface */
  --text-4:      #7E8A98;  /* captions, meta — AA on every surface */
  --text-on-accent: #04161C;

  /* ---------- Accent ---------- */
  --accent:        var(--anova-ice);
  --accent-bright: #5CE4FA;
  --accent-deep:   #0FA8C6;
  --accent-tint:   rgba(34, 208, 238, .12);
  --accent-tint-2: rgba(34, 208, 238, .22);
  --accent-line:   rgba(34, 208, 238, .38);

  /* ---------- Status (asset map 06. STATUS / TAGS) ---------- */
  --success: #34D399;
  --warning: #E0A44A;
  --error:   #F2645C;
  --info:    var(--anova-ice);
  --disabled-bg:     rgba(58, 70, 86, .22);
  --disabled-text:   #55606D;
  --disabled-border: rgba(58, 70, 86, .35);

  /* ---------- Glow (used sparingly — focus points are special) ---------- */
  --glow-dot:     0 0 6px 1px rgba(34, 208, 238, .55), 0 0 16px 3px rgba(34, 208, 238, .22);
  --glow-dot-lg:  0 0 10px 2px rgba(34, 208, 238, .6), 0 0 34px 10px rgba(34, 208, 238, .22);
  --glow-edge:    0 0 0 1px rgba(34, 208, 238, .3), 0 0 24px -6px rgba(34, 208, 238, .45);
  --glow-text:    0 0 18px rgba(34, 208, 238, .35);

  /* ---------- Elevation ---------- */
  --shadow-card:  0 1px 0 rgba(255, 255, 255, .028) inset, 0 20px 50px -34px rgba(0, 0, 0, .95);
  --shadow-raise: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 28px 70px -34px rgba(0, 0, 0, 1);
  --shadow-nav:   0 12px 40px -24px rgba(0, 0, 0, .95);

  /* ---------- Radii (asset map 05. RADIUS 16 is the signature) ---------- */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* ---------- Spacing scale ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  40px;
  --s-8:  56px;
  --s-9:  72px;
  --s-10: 96px;
  --s-11: 128px;

  /* Vertical section rhythm — fluid */
  --section-y:    clamp(64px, 8vw, 120px);
  --section-y-lg: clamp(88px, 11vw, 168px);

  /* ---------- Layout ---------- */
  --container:      1200px;
  --container-wide: 1340px;
  --container-text: 760px;
  --gutter:         clamp(20px, 4.5vw, 40px);
  --nav-h:          72px;

  /* ---------- Typography ----------
     Display: Aeonik Pro (commercial, not bundled) → substituted with Manrope.
     Body/UI: Inter, as specified. See docs/DESIGN-DECISIONS.md */
  --font-display: "Manrope", "Aeonik Pro", ui-sans-serif, system-ui, -apple-system,
                  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system,
                  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — proportions taken from asset map 04. TYPOGRAPHY,
     scaled fluidly. Deliberately restrained: no viewport-eating headlines. */
  --fs-display: clamp(2.375rem, 1.55rem + 3.1vw, 3.375rem); /* 38 → 54 */
  --fs-h1:      clamp(2rem, 1.42rem + 2.2vw, 2.75rem);      /* 32 → 44 */
  --fs-h2:      clamp(1.5rem, 1.24rem + 0.95vw, 1.9rem);    /* 24 → 30 */
  --fs-h3:      clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);  /* 18 → 20 */
  --fs-lead:    clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem); /* 17 → 19 */
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.8125rem;
  --fs-caption:  0.75rem;

  --lh-tight: 1.14;
  --lh-snug:  1.28;
  --lh-body:  1.62;
  --lh-loose: 1.72;

  --tracking-display: -0.022em;
  --tracking-h:       -0.015em;
  --tracking-body:    -0.006em;
  --tracking-label:   0.16em;   /* uppercase eyebrows / labels */
  --tracking-wordmark:0.28em;

  --fw-light:  300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  /* ---------- Icons ---------- */
  --icon-sw: 1.8;      /* "consistent 2px line weight" on a 24px grid */
  --icon-sm: 18px;
  --icon-md: 24px;
  --icon-lg: 32px;
  --icon-xl: 40px;

  /* ---------- Motion (asset map 10. MOTION / INTERACTION CUES) ---------- */
  --ease:        cubic-bezier(.22, .8, .3, 1);
  --ease-in-out: cubic-bezier(.55, .06, .28, .96);
  --dur-1: 140ms;   /* response  */
  --dur-2: 240ms;   /* focus     */
  --dur-3: 420ms;   /* reveal    */
  --dur-4: 800ms;   /* flow      */
  --dur-field: 90s; /* field-line drift */

  /* ---------- Z ---------- */
  --z-field: 0;
  --z-base: 1;
  --z-sticky: 60;
  --z-nav: 70;
  --z-overlay: 80;
  --z-toast: 90;
}

/* The identity is committed dark. Light preference is respected only for
   forced-colors / print, not by inverting the brand. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms; }
}