/* =============================================================================
   tokens.css — single source of truth for design tokens (May 2026)
   ─────────────────────────────────────────────────────────────────────────────
   Layered architecture (run order, lowest specificity first):

     reset       → CSS reset / normalize
     tokens      → THIS FILE: raw scales + semantic role aliases
     theme       → Tailwind v4 @theme (consumes tokens via var())
     base        → element defaults (body, h*, links, focus rings)
     components  → ff-*, forge-* component classes
     utilities   → Tailwind tw:* utilities (highest within layers)

   ─────────────────────────────────────────────────────────────────────────────
   Why this file exists:
     Before this rewrite, brand and surface values were duplicated in
     standalone-theme-lite.css (--ff-*) and tailwind.css @theme
     (--color-forge-*). A change in one place required a parallel change in
     the other; missing the second one was the source of the May 2026
     "150 broken var() references" regression.

   ─────────────────────────────────────────────────────────────────────────────
   Migration plan:

     Step 1 (this commit): introduce tokens.css with semantic --ff-color-*
       aliases. Link first in default.htm. Existing --ff-* and
       --color-forge-* remain functional — no visual change.

     Step 2: rewrite tailwind.css @theme block to read tokens by name:
         @theme {
           --color-forge-blue:    var(--ff-color-brand-600);
           --color-forge-canvas:  var(--ff-color-bg);
           --color-forge-muted:   var(--ff-color-text-muted);
           ...
         }

     Step 3: replace raw definitions in standalone-theme-lite.css :root
       with semantic aliases (--ff-ink → var(--ff-color-brand-600), etc.).

     Step 4: codemod components to reference semantic tokens directly.
       Old --ff-ink/--ff-muted retained as legacy aliases for ~1 release.

     Step 5: code-review rule — hex literals in component CSS are rejected.

   ─────────────────────────────────────────────────────────────────────────────
   Naming convention:
     --ff-color-<role>          — semantic role (bg, text, border, brand)
     --ff-color-<role>-<modifier>  — variant (text-muted, bg-elevated)
     --ff-color-<family>-<scale>   — raw scale step (brand-600, neutral-50)

   Components consume SEMANTIC roles. Raw scales are private to this file
   except where a specific scale step is genuinely needed (e.g. tint
   backgrounds, accent borders).
   ============================================================================= */

@layer reset, tokens, theme, base, components, utilities;

@layer tokens {

    /* ─── Raw color scales ──────────────────────────────────────────────── */
    :root {
        /* Brand: indigo. brand-600 is the WCAG AA boundary on white (4.5:1). */
        --ff-color-brand-50:  #f1f0fc;
        --ff-color-brand-100: #eeedfb;
        --ff-color-brand-200: #c7c5f4;
        --ff-color-brand-300: #a8a3ef;
        --ff-color-brand-400: #7c74f7;
        --ff-color-brand-500: #4f46e5;  /* light-mode brand */
        --ff-color-brand-600: #4338ca;
        --ff-color-brand-700: #3d35c8;  /* hover / active */
        --ff-color-brand-800: #2e2890;
        --ff-color-brand-900: #1e1d3d;

        /* Neutrals — measured against #fff with axe-core 4.11. */
        --ff-color-neutral-0:   #ffffff;
        --ff-color-neutral-50:  #f7f7fb;
        --ff-color-neutral-100: #eeeff6;
        --ff-color-neutral-200: #e5e6ef;
        --ff-color-neutral-300: #d3d4e8;
        --ff-color-neutral-400: #a1a8c0;
        --ff-color-neutral-500: #646a82; /* 4.9:1 on #fff — AA small text */
        --ff-color-neutral-600: #4a505e; /* 6.4:1 on #fff — AA + margin */
        --ff-color-neutral-700: #2d3047;
        --ff-color-neutral-800: #161929;
        --ff-color-neutral-900: #0d0e18;

        /* Status — only the ramps actually used by components stay here. */
        --ff-color-success-100: #dcfce7;
        --ff-color-success-300: #86efac;
        --ff-color-success-600: #16a34a;
        --ff-color-warning-500: #ffc107;

        /* ─── Semantic roles (light theme) ──────────────────────────────── */

        /* Surfaces */
        --ff-color-bg:         var(--ff-color-neutral-0);   /* page canvas */
        --ff-color-bg-soft:    var(--ff-color-neutral-50);  /* secondary surface */
        --ff-color-bg-muted:   var(--ff-color-neutral-100); /* tertiary, dividers */
        --ff-color-bg-tint:    var(--ff-color-brand-100);   /* brand-tint blocks */
        --ff-color-bg-elev:    var(--ff-color-neutral-0);   /* elevated card */

        /* Text */
        --ff-color-text:       var(--ff-color-neutral-900);
        --ff-color-text-muted: var(--ff-color-neutral-600);
        --ff-color-text-subtle:var(--ff-color-neutral-500);
        --ff-color-text-onbrand: var(--ff-color-neutral-0);

        /* Border */
        --ff-color-border:     var(--ff-color-neutral-200);
        --ff-color-border-mid: var(--ff-color-neutral-300);
        --ff-color-border-brand: var(--ff-color-brand-200);

        /* Brand action (button bg, link hover, accent) */
        --ff-color-brand:        var(--ff-color-brand-500);
        --ff-color-brand-hover:  var(--ff-color-brand-700);
        --ff-color-brand-tint:   var(--ff-color-brand-100);

        /* Status */
        --ff-color-success:      var(--ff-color-success-600);
        --ff-color-success-tint: var(--ff-color-success-100);
        --ff-color-warning:      var(--ff-color-warning-500);

        /* ─── Non-color tokens ──────────────────────────────────────────── */

        /* Radius scale — t-shirt sizes, matches existing values in CSS. */
        --ff-radius-sm: 6px;
        --ff-radius-md: 9px;
        --ff-radius-lg: 12px;
        --ff-radius-xl: 16px;
        --ff-radius-pill: 9999px;

        /* Space scale — base 4px grid. */
        --ff-space-1:  4px;
        --ff-space-2:  8px;
        --ff-space-3:  12px;
        --ff-space-4:  16px;
        --ff-space-5:  20px;
        --ff-space-6:  24px;
        --ff-space-8:  32px;
        --ff-space-10: 40px;
        --ff-space-12: 48px;
        --ff-space-16: 64px;
        --ff-space-20: 80px;

        /* Typography */
        --ff-font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        --ff-text-xs:   12px;
        --ff-text-sm:   14px;
        --ff-text-md:   16px;
        --ff-text-lg:   18px;
        --ff-text-xl:   20px;
        --ff-text-2xl:  clamp(22px, 2.4vw, 28px);
        --ff-text-3xl:  clamp(28px, 3vw,   42px);
        --ff-text-hero: clamp(34px, 5.4vw, 64px);

        /* Motion */
        --ff-ease-out:        cubic-bezier(.2, .8, .2, 1);
        --ff-duration-fast:   140ms;
        --ff-duration-base:   200ms;
        --ff-duration-slow:   320ms;
        --ff-transition:      var(--ff-duration-base) ease;
        --ff-transition-fast: var(--ff-duration-fast) ease;
        --ff-transition-slow: var(--ff-duration-slow) var(--ff-ease-out);

        /* Elevation */
        --ff-shadow-sm: 0 1px 2px rgba(13, 14, 24, .04), 0 1px 1px rgba(13, 14, 24, .06);
        --ff-shadow-md: 0 10px 28px rgba(13, 14, 24, .08);
        --ff-shadow-lg: 0 18px 56px rgba(13, 14, 24, .14);
        --ff-lift:      var(--ff-shadow-md); /* legacy alias */

        /* Focus ring */
        --ff-focus-ring: 0 0 0 3px var(--ff-color-brand-200);
    }

    /* ─── Dark theme overrides ──────────────────────────────────────────── *
       Only semantic roles flip. Raw scales stay the same — components that
       reference semantic roles get the dark variant for free.            */
    [data-theme="dark"] {
        /* Surfaces */
        --ff-color-bg:         #0b0d1a;
        --ff-color-bg-soft:    #11131e;
        --ff-color-bg-muted:   #161929;
        --ff-color-bg-tint:    #1e1d3d;
        --ff-color-bg-elev:    #13162a;

        /* Text */
        --ff-color-text:       #f3f4fb;
        --ff-color-text-muted: #a1a8c0;
        --ff-color-text-subtle:#7f86a0;

        /* Border */
        --ff-color-border:     #232539;
        --ff-color-border-mid: #2d3047;
        --ff-color-border-brand: #3a3573;

        /* Brand — measured against #fff button text in dark mode.
           Values match the prior standalone-theme-lite hand-tuned set,
           verified with axe-core and Lighthouse contrast audits. */
        --ff-color-brand:       #6c5ce0;   /* 4.84:1 on #fff ✓ AA  */
        --ff-color-brand-hover: #4f44b8;   /* 7.40:1 on #fff ✓ AAA */
        --ff-color-brand-tint:  #1e1d3d;
        --ff-color-border-brand:#3a3573;

        /* Elevation — heavier shadow for OLED contrast */
        --ff-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
        --ff-shadow-md: 0 10px 28px rgba(0, 0, 0, .45);
        --ff-shadow-lg: 0 18px 56px rgba(0, 0, 0, .55);

        /* Focus ring */
        --ff-focus-ring: 0 0 0 3px rgba(124, 116, 247, .35);

        color-scheme: dark;
    }

    /* ─── Legacy aliases (Step 1 of migration) ──────────────────────────── *
       Existing components still use --ff-ink / --ff-muted / --color-forge-*.
       Map them to the new semantic tokens so nothing breaks during the
       migration. Delete this block once components reference semantic
       tokens directly (Step 4).                                          */
    :root {
        --ff-ink:           var(--ff-color-brand);
        --ff-ink-d:         var(--ff-color-brand-hover);
        --ff-ink-l:         var(--ff-color-brand-tint);
        --ff-ink-b:         var(--ff-color-border-brand);
        --ff-text:          var(--ff-color-text);
        --ff-muted:         var(--ff-color-text-muted);
        --ff-subtle:        var(--ff-color-text-subtle);
        --ff-canvas:        var(--ff-color-bg);
        --ff-bg-soft:       var(--ff-color-bg-soft);
        --ff-bg-muted:      var(--ff-color-bg-muted);
        --ff-border:        var(--ff-color-border);
        --ff-border-mid:    var(--ff-color-border-mid);
        --ff-easing-out:    var(--ff-ease-out);
    }
}