/* =====================================================
   IMAT Quest — Ω Design Tokens
   css/tokens.css

   Single source of truth for every design dimension.

   Consumed by: every other CSS file in the project.
   Do NOT hardcode values in component CSS — reference tokens.

   Token categories (in cascade order):
     1. Breakpoint tokens (viewport)
     2. Container-query tokens (component)
     3. Fluid type scale (Utopia math — 320px @ 1.2 → 1440px @ 1.333)
     4. Fluid space scale (same math, 9 steps + 7 fluid pairs)
     5. Color tokens (OKLCH first-class + hex legacy bridge)
     6. Motion tokens (durations + easings, reduced-motion aware)
     7. Elevation / shadow tokens
     8. Radius tokens
     9. Z-index tokens
    10. State pattern tokens (empty / loading / error)
    11. Touch-target + accessibility minima

   Architecture notes:
   - @property declarations give type-safe custom properties on
     supporting browsers (Chrome 85+, Safari 16.4+, Firefox 128+).
     Fallback to CSS variables in older browsers — no breakage.
   - OKLCH color space is perceptually uniform (smoother gradients,
     predictable color math via color-mix). Legacy --hex-* aliases
     preserved for any downstream code not yet migrated.
   - Fluid scale generated via Utopia.fyi math — clamp() values
     guarantee smooth scaling across all viewports, no steppy jumps.
   ===================================================== */

@layer tokens {
  /* ─── 1. BREAKPOINT TOKENS ───────────────────────────────
     Viewport-based breakpoints. Every media query in the codebase
     MUST use one of these literal values. Stylelint enforces this.
     See docs/active/omega/DEVICE-MATRIX.md for which real devices each covers.
     ─────────────────────────────────────────────────────── */

  @property --bp-fold {
    syntax: "<length>";
    inherits: false;
    initial-value: 280px;
  }
  @property --bp-phone-s {
    syntax: "<length>";
    inherits: false;
    initial-value: 360px;
  }
  @property --bp-phone {
    syntax: "<length>";
    inherits: false;
    initial-value: 390px;
  }
  @property --bp-phone-l {
    syntax: "<length>";
    inherits: false;
    initial-value: 430px;
  }
  @property --bp-tablet {
    syntax: "<length>";
    inherits: false;
    initial-value: 768px;
  }
  @property --bp-tablet-l {
    syntax: "<length>";
    inherits: false;
    initial-value: 1024px;
  }
  @property --bp-laptop {
    syntax: "<length>";
    inherits: false;
    initial-value: 1366px;
  }
  @property --bp-laptop-l {
    syntax: "<length>";
    inherits: false;
    initial-value: 1440px;
  }
  @property --bp-desktop {
    syntax: "<length>";
    inherits: false;
    initial-value: 1920px;
  }
  @property --bp-wide {
    syntax: "<length>";
    inherits: false;
    initial-value: 2560px;
  }
  @property --bp-ultra {
    syntax: "<length>";
    inherits: false;
    initial-value: 3840px;
  }

  /* ─── 2. CONTAINER-QUERY TOKENS ─────────────────────────
     For use with @container queries in component CSS.
     Components respond to their container width, not viewport.
     ─────────────────────────────────────────────────────── */

  @property --cq-card-s {
    syntax: "<length>";
    inherits: false;
    initial-value: 280px;
  }
  @property --cq-card-m {
    syntax: "<length>";
    inherits: false;
    initial-value: 400px;
  }
  @property --cq-card-l {
    syntax: "<length>";
    inherits: false;
    initial-value: 600px;
  }
  @property --cq-col-2 {
    syntax: "<length>";
    inherits: false;
    initial-value: 320px;
  }
  @property --cq-col-3 {
    syntax: "<length>";
    inherits: false;
    initial-value: 480px;
  }
  @property --cq-col-4 {
    syntax: "<length>";
    inherits: false;
    initial-value: 640px;
  }

  :root {
    /* ─── 3. FLUID TYPE SCALE ─────────────────────────────
       Generated from Utopia.fyi:
         Min: 320px viewport, 1rem base, 1.2 ratio
         Max: 1440px viewport, 1.2rem base, 1.333 ratio

       Uses `vi` (viewport-inline) for writing-mode / RTL safety.

       Negative steps (-3 to -1) for small text (kickers, captions, meta).
       Positive steps (+1 to +8) for body up to display.
       ───────────────────────────────────────────────────── */

    --text-3xs: clamp(0.58rem, 0.557rem + 0.115vi, 0.659rem); /* kicker, legal */
    --text-2xs: clamp(0.694rem, 0.656rem + 0.192vi, 0.829rem); /* caption, meta */
    --text-xs: clamp(0.833rem, 0.77rem + 0.317vi, 1.052rem); /* small body */
    --text-sm: clamp(1rem, 0.896rem + 0.52vi, 1.333rem); /* body */
    --text-base: clamp(1.2rem, 1.036rem + 0.821vi, 1.688rem); /* large body / h6 */
    --text-md: clamp(1.44rem, 1.193rem + 1.233vi, 2.136rem); /* h5 */
    --text-lg: clamp(1.728rem, 1.368rem + 1.802vi, 2.703rem); /* h4 */
    --text-xl: clamp(2.074rem, 1.563rem + 2.553vi, 3.421rem); /* h3 */
    --text-2xl: clamp(2.488rem, 1.775rem + 3.565vi, 4.328rem); /* h2 */
    --text-3xl: clamp(2.986rem, 2.007rem + 4.895vi, 5.478rem); /* h1 */
    --text-4xl: clamp(3.583rem, 2.253rem + 6.648vi, 6.931rem); /* display */
    --text-5xl: clamp(4.3rem, 2.509rem + 8.954vi, 8.772rem); /* hero display */

    /* Line heights — fluid body, tight display */
    --lh-tight: 1.1;
    --lh-snug: 1.25;
    --lh-normal: 1.5;
    --lh-relaxed: 1.625;
    --lh-loose: 1.75;

    /* Letter spacing (display tight → body relaxed) */
    --tracking-tightest: -0.04em;
    --tracking-tighter: -0.025em;
    --tracking-tight: -0.015em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;

    /* Font weights — Outfit 400-800, Inter 400-600 supported on Google Fonts subset.
       Use semantic names (regular/medium/semibold/bold/extrabold) not numeric. */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;

    /* Font families — Outfit (headings), Inter (body), Georgia (editorial prose),
       Fraunces + DM Serif Display (wordmark). CLAUDE.md §Typography locks these.
       Numbers ALWAYS sans inside serif paragraphs via .num primitive. */
    --font-heading: "Outfit", system-ui, -apple-system, sans-serif;
    --font-body: "Inter", system-ui, -apple-system, sans-serif;
    --font-serif-editorial: Georgia, "Times New Roman", serif;
    --font-wordmark-display: "DM Serif Display", Georgia, serif;
    --font-wordmark-text: "Fraunces", Georgia, serif;

    /* ─── 4. FLUID SPACE SCALE ────────────────────────────
       9 steps (3xs → 3xl) + 7 fluid pairs (transition between steps).
       Use pairs for padding/margins that should flex two steps
       across the viewport range instead of one.
       ───────────────────────────────────────────────────── */

    --space-3xs: clamp(0.25rem, 0.217rem + 0.164vi, 0.375rem);
    --space-2xs: clamp(0.5rem, 0.434rem + 0.329vi, 0.75rem);
    --space-xs: clamp(0.75rem, 0.651rem + 0.493vi, 1.125rem);
    --space-s: clamp(1rem, 0.868rem + 0.657vi, 1.5rem);
    --space-m: clamp(1.5rem, 1.303rem + 0.986vi, 2.25rem);
    --space-l: clamp(2rem, 1.737rem + 1.314vi, 3rem);
    --space-xl: clamp(3rem, 2.605rem + 1.971vi, 4.5rem);
    --space-2xl: clamp(4rem, 3.474rem + 2.629vi, 6rem);
    --space-3xl: clamp(6rem, 5.21rem + 3.943vi, 9rem);

    /* Fluid pairs — shift between adjacent steps */
    --space-3xs-2xs: clamp(0.25rem, 0.184rem + 0.329vi, 0.75rem);
    --space-2xs-xs: clamp(0.5rem, 0.368rem + 0.657vi, 1rem);
    --space-xs-s: clamp(0.75rem, 0.519rem + 1.151vi, 1.625rem);
    --space-s-m: clamp(1rem, 0.671rem + 1.643vi, 2.25rem);
    --space-m-l: clamp(1.5rem, 1.039rem + 2.3vi, 3rem);
    --space-l-xl: clamp(2rem, 1.341rem + 3.286vi, 4.5rem);
    --space-xl-2xl: clamp(3rem, 2.145rem + 4.272vi, 6rem);
    --space-2xl-3xl: clamp(4rem, 2.684rem + 6.572vi, 9rem);

    /* ─── 5. COLOR TOKENS ─────────────────────────────────
       OKLCH first-class: perceptually uniform, wide-gamut ready,
       smooth via color-mix(). Legacy --hex-* preserved as bridge.

       Brand palette (locked 2026-04-14, + sage 2026-04-22):
         Parchment Cream — default warm fill (55%)
         Deep Navy       — anchor, body text (25%)
         Burgundy→Pink   — primary accent range (15%, always as ramp)
         Dusty Rose      — soft burgundy tint (hovers, region base)
         Amber Gold      — scholarship / flourish / highlights
         Teal            — wayfinding only, 5% max
         Sage            — NEW: positive-status, success, validation
         Ice Blue-Gray   — glass overlays only, NEVER flat fill
       ───────────────────────────────────────────────────── */

    /* Primary palette — OKLCH */
    --color-navy: oklch(21% 0.05 258); /* #001F3D */
    --color-navy-deep: oklch(14% 0.04 258); /* #001428 */
    --color-navy-light: oklch(25% 0.05 258); /* #002A52 */
    --color-burgundy: oklch(38% 0.13 15); /* #6B2838 */
    --color-pink: oklch(65% 0.19 10); /* #E8476B */
    --color-rose: oklch(83% 0.07 10); /* #E8C4C9 */
    --color-amber: oklch(72% 0.13 65); /* #D99B47 */
    --color-amber-ink: oklch(48% 0.12 65); /* #8A651E — WCAG AA amber text on light */
    --color-teal: oklch(50% 0.07 195); /* #2E7D7A */
    --color-sage: oklch(77% 0.06 140); /* #A8C69A — NEW, Hersh 2026-04-22 */
    --color-cream: oklch(95% 0.035 85); /* #F6EEDC — Parchment Cream */
    --color-ice: oklch(92% 0.02 245); /* #DCE7F3 — GLASS ONLY */
    --color-white: oklch(100% 0 0); /* #FFFFFF */
    --color-black: oklch(0% 0 0); /* #000000 */

    /* Mixed / tonal variants via color-mix (wide browser support now) */
    --color-navy-muted: color-mix(in oklch, var(--color-navy), white 18%);
    --color-burgundy-muted: color-mix(in oklch, var(--color-burgundy), white 20%);
    --color-cream-warm: color-mix(in oklch, var(--color-cream), var(--color-amber) 8%);
    --color-cream-cool: color-mix(in oklch, var(--color-cream), white 15%);

    /* Gradient family — use --gradient-accent-wide for flutter animations */
    --gradient-accent: linear-gradient(135deg, var(--color-pink) 0%, var(--color-burgundy) 100%);
    --gradient-accent-wide: linear-gradient(
      135deg,
      var(--color-pink) 0%,
      var(--color-burgundy) 60%,
      var(--color-pink) 120%
    );

    /* Semantic aliases — component CSS should prefer these */
    --color-bg: var(--color-white);
    --color-bg-warm: var(--color-cream);
    --color-bg-warm-cool: var(--color-cream-cool);
    --color-bg-dark: var(--color-navy);
    --color-text: var(--color-navy);
    --color-text-muted: color-mix(in oklch, var(--color-navy), white 35%);
    --color-text-subtle: color-mix(in oklch, var(--color-navy), white 50%);
    --color-text-inverse: var(--color-white);
    --color-accent: var(--color-burgundy);
    --color-accent-light: var(--color-pink);
    --color-success: var(--color-sage); /* NEW: sage for success */
    --color-border: color-mix(in oklch, var(--color-navy), transparent 85%);
    --color-border-strong: color-mix(in oklch, var(--color-navy), transparent 70%);

    /* Forced-colors mode (Windows High Contrast) — explicit system keywords */
    /* Applied in base.css via @media (forced-colors: active) */

    /* ─── 6. MOTION TOKENS ────────────────────────────────
       Durations + easings. Every animation/transition in the
       codebase must reference these — no magic milliseconds.

       Reduced-motion override below zeroes all durations but
       keeps the variable name in place (no cascade hunting).
       ───────────────────────────────────────────────────── */

    --dur-instant: 100ms;
    --dur-fast: 180ms;
    --dur-base: 240ms;
    --dur-slow: 400ms;
    --dur-crawl: 600ms;
    --dur-epic: 900ms;
    --dur-cinematic: 1400ms;

    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
    --ease-spring: cubic-bezier(0.5, 1.5, 0.5, 0.85);
    --ease-flutter: cubic-bezier(0.37, 0, 0.63, 1);
    --ease-linear: linear;

    /* ─── 7. ELEVATION / SHADOW TOKENS ────────────────────
       5-step elevation system. OKLCH shadows render slightly
       warmer, matching our palette better than pure black/gray.
       ───────────────────────────────────────────────────── */

    --shadow-xs: 0 1px 2px oklch(20% 0.05 258 / 0.05);
    --shadow-sm: 0 2px 4px oklch(20% 0.05 258 / 0.08), 0 1px 2px oklch(20% 0.05 258 / 0.04);
    --shadow-md: 0 4px 12px oklch(20% 0.05 258 / 0.1), 0 2px 4px oklch(20% 0.05 258 / 0.05);
    --shadow-lg: 0 12px 32px oklch(20% 0.05 258 / 0.14), 0 4px 8px oklch(20% 0.05 258 / 0.07);
    --shadow-xl: 0 24px 64px oklch(20% 0.05 258 / 0.2), 0 8px 16px oklch(20% 0.05 258 / 0.1);

    /* ─── 8. RADIUS TOKENS ────────────────────────────────
       ───────────────────────────────────────────────────── */

    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;

    /* ─── 9. Z-INDEX TOKENS ───────────────────────────────
       Semantic layers. Never use raw z-index numbers.
       ───────────────────────────────────────────────────── */

    --z-base: 0;
    --z-raised: 1;
    --z-sticky: 10;
    --z-dropdown: 20;
    --z-overlay: 30;
    --z-modal: 40;
    --z-toast: 50;
    --z-tooltip: 60;
    --z-max: 9999;

    /* ─── 10. STATE PATTERN TOKENS ─────────────────────────
       Empty / loading / error state canonical styles.
       Used by any component that has those states.
       ───────────────────────────────────────────────────── */

    /* Empty */
    --state-empty-bg: var(--color-cream);
    --state-empty-border: var(--color-border);
    --state-empty-text: var(--color-text-muted);

    /* Loading — shimmer */
    --state-loading-bg: color-mix(in oklch, var(--color-cream), white 50%);
    --state-loading-shimmer: linear-gradient(
      90deg,
      transparent,
      color-mix(in oklch, var(--color-cream), white 30%),
      transparent
    );
    --dur-loading-shimmer: 1800ms;

    /* Error */
    --state-error-bg: color-mix(in oklch, var(--color-burgundy), white 88%);
    --state-error-border: var(--color-burgundy);
    --state-error-text: var(--color-burgundy);

    /* Success */
    --state-success-bg: color-mix(in oklch, var(--color-sage), white 85%);
    --state-success-border: var(--color-sage);
    --state-success-text: color-mix(in oklch, var(--color-sage), var(--color-navy) 40%);

    /* ─── 11. TOUCH TARGETS + ACCESSIBILITY MINIMA ────────
       WCAG AAA touch target: 44×44px (iOS HIG).
       ───────────────────────────────────────────────────── */

    --touch-target: 44px;
    --focus-ring-width: 3px;
    --focus-ring-color: var(--color-burgundy);
    --focus-ring-offset: 2px;
  }

  /* ─── REDUCED-MOTION OVERRIDE ──────────────────────────
     Respect user preference. Zero durations retain variable
     name in cascade, so no hunting needed in component CSS.
     Components that need an intentional reduced-motion variant
     (hero xfade, scroll-reveal, parallax) override this at their
     own level — this is the blanket fallback.
     ─────────────────────────────────────────────────────── */

  @media (prefers-reduced-motion: reduce) {
    :root {
      --dur-instant: 0.01ms;
      --dur-fast: 0.01ms;
      --dur-base: 0.01ms;
      --dur-slow: 0.01ms;
      --dur-crawl: 0.01ms;
      --dur-epic: 0.01ms;
      --dur-cinematic: 0.01ms;
    }
  }

  /* ─── DARK MODE SCAFFOLD (Phase B enable) ──────────────
     Tokens ready; flip via :root.dark or @media (prefers-color-scheme).
     Not activated yet — dark Colosseum video hero needs art-direction
     decision before dark mode ships.
     ─────────────────────────────────────────────────────── */

  /* @media (prefers-color-scheme: dark) {
       :root {
         --color-bg:     var(--color-navy-deep);
         --color-bg-warm: oklch(18% 0.03 258);
         --color-text:   var(--color-cream);
         ...
       }
     }
  */
}