/* tokens.css: design tokens + font faces. Consumed by every other stylesheet. */

/* ---------- Fonts ---------- */

@font-face {
  font-family: 'Inter Var';
  src: url('/fonts/inter-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono Var';
  src: url('/fonts/jetbrains-mono-var-latin.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* Metric-matched fallbacks: zero layout shift while the variable fonts load. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  ascent-override: 90.49%;
  descent-override: 22.56%;
  line-gap-override: 0%;
  size-adjust: 107.2%;
}

@font-face {
  font-family: 'JBMono Fallback';
  src: local('Courier New');
  ascent-override: 88%;
  descent-override: 18%;
  line-gap-override: 0%;
  size-adjust: 99%;
}

/* ---------- Tokens ---------- */

:root {
  /* primitives: v2 "midnight desk": electric blue on deep blue-black.
     Every ratio below computed against canvas #0A0F16 (WCAG 2.x). */
  --azure-100: #DBEAFE;
  --azure-200: #96C6FF;
  --azure-300: #7AB5FF;
  --azure-400: #61A8FF;
  --azure-500: #3D7DD8;
  --azure-600: #2E64B0;
  --azure-900: #0D1B31;
  --azure-electric: #38BDF8; /* glow tier ONLY, one element sitewide */

  --ink-950: #0A0F16;
  --ink-900: #101826;
  --ink-850: #16202F;
  --ink-800: #1C2938;
  --ink-750: #2B3850;
  --ink-600: #57677F;
  --ink-400: #7C8AA0;
  --ink-300: #A3AFC0;
  --ink-150: #D6DEE8;
  --ink-100: #E9EEF4;

  --teal-400: #2DD4BF;
  --cyan-400: #22D3EE;
  --amber-400: #FBBF24;
  --red-400: #F87171;

  /* semantic */
  --color-canvas: #0A0F16;        /* page bg, never pure black */
  --color-surface-1: #101826;     /* cards        (1.08:1) */
  --color-surface-2: #16202F;     /* nav, terminal body (1.17:1) */
  --color-surface-3: #1C2938;     /* raised bits  (1.30:1) */
  --color-border: #1E2937;        /* decorative hairline */
  --color-border-2: #2B3850;      /* stronger divider */
  --color-border-strong: #57677F; /* interactive control borders (3.34:1) */
  --color-text-hi: #E9EEF4;       /* headings     (16.47:1) */
  --color-text: #D6DEE8;          /* body         (14.16:1 AAA) */
  --color-text-2: #A3AFC0;        /* secondary    (8.65:1 AAA) */
  --color-text-3: #7C8AA0;        /* labels/meta  (5.49:1 AA) */
  --color-accent: #61A8FF;        /* THE hue: links, prompts, CTA (7.83:1) */
  --color-accent-bright: #96C6FF; /* hover + focus ring (10.81:1) */
  --color-accent-dim: #3D7DD8;    /* de-emphasized (4.69:1) */
  --color-accent-tint: #0D1B31;   /* accent-tinted fill */
  --color-on-accent: #051023;     /* text ON accent buttons (7.74:1 on accent) */
  --color-glow: #38BDF8;          /* ONE element only (status dot) */
  --color-secondary: #2DD4BF;     /* teal, sparse structure accents (10.32:1) */
  --color-info: #22D3EE;
  --color-warn: #FBBF24;
  --color-err: #F87171;
  --color-ok: #4ADE80;
  --color-focus-ring: #96C6FF;

  /* spacing: 8px grid + fluid macro */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-fluid-sm: clamp(1rem, 0.75rem + 1.25vw, 2rem);
  --space-fluid-md: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  --space-fluid-lg: clamp(2rem, 1rem + 5vw, 6rem);
  --space-fluid-xl: clamp(3rem, 2rem + 6vw, 8rem);

  /* type scale: Major Third fluid, 320 → 1440 */
  --step--2: clamp(0.64rem, 0.59rem + 0.25vw, 0.75rem);
  --step--1: clamp(0.8rem, 0.76rem + 0.21vw, 0.875rem);
  --step-0: clamp(1rem, 0.93rem + 0.34vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.1rem + 0.67vw, 1.5rem);
  --step-2: clamp(1.563rem, 1.3rem + 1.04vw, 2rem);
  --step-3: clamp(1.953rem, 1.6rem + 1.29vw, 2.5rem);
  --step-4: clamp(2.441rem, 1.88rem + 1.96vw, 3.5rem);
  --step-5: clamp(3.052rem, 2rem + 3.05vw, 5rem);

  --font-mono: 'JetBrains Mono Var', 'JBMono Fallback', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: 'Inter Var', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* motion */
  --dur-micro: 120ms;
  --dur-state: 180ms;
  --dur-reveal: 260ms;
  --dur-hero: 420ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: linear(0, 0.05, 0.18, 0.35, 0.54, 0.72, 0.86, 0.94, 0.98, 1); /* critically damped */
  --travel: 20px;
}

@media (prefers-contrast: more) {
  :root {
    --color-text: #F5F8FC;
    --color-text-2: #C7D1DE;
    --color-text-3: #A3AFC0;
    --color-border: #57677F;
    --color-accent: #96C6FF;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro: 0.01ms;
    --dur-state: 0.01ms;
    --dur-reveal: 0.01ms;
    --dur-hero: 0.01ms;
    --travel: 0px;
  }
}