/* ==========================================================================
   Design tokens — the single source of truth.
   Color · Light · Type · Space · Radius · Depth · Material · Motion
   ========================================================================== */

/* Animatable custom property for the pointer-following highlight on cards */
@property --glow {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

:root {
  color-scheme: light;

  /* ---------- Canvas & ink ---------- */
  --canvas: #fbfbfc;          /* dominant near-white */
  --canvas-2: #f4f5f8;        /* quiet tonal band */
  --surface: #ffffff;
  --ink: #0e0f13;             /* display + primary text  (19.6:1 on canvas) */
  --ink-2: #464953;           /* body copy               (9.1:1) */
  --ink-3: #6b6e78;           /* captions, meta          (5.0:1) */
  --ink-4: #a3a6ae;           /* decorative only — never for text */
  --hairline: rgba(14, 15, 19, 0.08);
  --hairline-2: rgba(14, 15, 19, 0.13);

  /* ---------- Accent (one restrained hue) ---------- */
  --accent: #2459e0;          /* 5.9:1 with white */
  --accent-hover: #1d4cc8;
  --accent-soft: rgba(36, 89, 224, 0.09);
  --accent-ring: rgba(36, 89, 224, 0.2);
  --accent-on-dark: #a3bcff;

  --success: #12865a;
  --amber: #d98a0b;
  --star: #f0a81c;
  --danger: #c0281c;

  /* ---------- Night (one dark section + one dark scene) ---------- */
  --night: #0b0c10;
  --on-night: #f4f5f8;
  --on-night-2: #a9adb9;      /* 8.4:1 on night */
  --on-night-hairline: rgba(255, 255, 255, 0.12);

  /* ---------- Light fields (RGB triplets so alpha can vary per use) ---------- */
  --light-cool: 112, 145, 255;
  --light-warm: 255, 182, 138;
  --light-lilac: 186, 168, 255;

  /* ---------- Typography ---------- */
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Scale: hero → display → title-l → title → lead → body → small → caption */
  --fs-hero: clamp(2.5rem, 5.3vw, 4.75rem);                 /* 40 → 76 */
  --fs-display: clamp(2.125rem, 1.3rem + 3vw, 3.625rem);    /* 34 → 58 */
  --fs-title-l: clamp(1.5rem, 1.15rem + 1.3vw, 2.25rem);    /* 24 → 36 */
  --fs-title: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);  /* 19 → 22 */
  --fs-lead: clamp(1.125rem, 1.04rem + 0.38vw, 1.3125rem);  /* 18 → 21 */
  --fs-body: 1.0625rem;                                     /* 17 */
  --fs-small: 0.9375rem;                                    /* 15 */
  --fs-caption: 0.8125rem;                                  /* 13 */

  --track-hero: -0.038em;
  --track-display: -0.032em;
  --track-title: -0.018em;

  --measure: 62ch;

  /* ---------- Space ---------- */
  --section-y: clamp(4.5rem, 3rem + 5.6vw, 8.5rem);
  --head-gap: clamp(2.5rem, 1.8rem + 2.5vw, 4.5rem);        /* section head → content */
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);            /* 16px at 360–390 */
  --container: 1200px;
  --container-wide: 1320px;
  --container-mid: 980px;
  --container-narrow: 760px;
  --nav-h: 56px;

  /* ---------- Radius (nested radii step down by padding) ---------- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* ---------- Depth: ink-tinted, layered, never pure black ---------- */
  --shadow-xs: 0 1px 2px rgba(14, 15, 19, 0.06);
  --shadow-sm: 0 1px 2px rgba(14, 15, 19, 0.04), 0 6px 16px -6px rgba(14, 15, 19, 0.10);
  --shadow-md: 0 1px 2px rgba(14, 15, 19, 0.04), 0 12px 32px -12px rgba(14, 15, 19, 0.16), 0 28px 64px -32px rgba(14, 15, 19, 0.14);
  --shadow-lg: 0 2px 4px rgba(14, 15, 19, 0.04), 0 24px 56px -20px rgba(14, 15, 19, 0.20), 0 60px 120px -48px rgba(14, 15, 19, 0.22);
  --shadow-device: 0 2px 6px rgba(14, 15, 19, 0.06), 0 30px 60px -24px rgba(14, 15, 19, 0.30), 0 70px 140px -50px rgba(14, 15, 19, 0.28);

  /* ---------- Material: film grain used inside glass (≈4% alpha) ---------- */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* settle: entrances, reveals */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* state changes */
  --dur-1: 160ms;   /* hover, press */
  --dur-2: 320ms;   /* UI state */
  --dur-3: 560ms;   /* panels, accordion */
  --dur-4: 900ms;   /* reveals, entrances */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
    --dur-4: 0ms;
  }
}