/* apps/web/static/css/_tokens.css
   Phase 37 design tokens. Layered ON TOP of design-system.css (which
   ships the canvas's --p-*, --sf-*, --st-* color tokens). This file
   adds the FLUID layer (type scale + spacing scale + motion) and
   semantic aliases that newer component CSS uses.

   Load order in base.html:
       _fonts.css  →  design-system.css  →  _tokens.css  →  lastz.css
   So semantic aliases here can reference the canvas color tokens. */

:root {
  /* ─── Type scale (fluid, clamp-based) ──────────────────────
     Replaces fixed-px font-sizes throughout the site. h1 stops
     wrapping one-word-per-line on mobile; large-display headlines
     don't go absurdly large on 4K. */
  --fz-h1:    clamp(2rem, 1.4rem + 3vw, 4rem);          /* 32 → 64 */
  --fz-h2:    clamp(1.625rem, 1.2rem + 2vw, 2.5rem);    /* 26 → 40 */
  --fz-h3:    clamp(1.25rem, 1.05rem + 1vw, 1.5rem);    /* 20 → 24 */
  --fz-body:  clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);   /* 15 → 16 */
  --fz-small: 0.8125rem;                                /* 13 */
  --fz-xs:    0.75rem;                                  /* 12 */
  --fz-data:  clamp(1.75rem, 1.2rem + 2.5vw, 3rem);     /* 28 → 48 */

  /* line-heights paired with the scale */
  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-body:  1.6;
  --lh-data:  1;

  /* ─── Spacing scale ────────────────────────────────────────
     Component-internal spacing in 4-px multiples; fluid section /
     gutter tokens for page-level rhythm. */
  --sp-1: 0.25rem;  /* 4 */
  --sp-2: 0.5rem;   /* 8 */
  --sp-3: 0.75rem;  /* 12 */
  --sp-4: 1rem;     /* 16 */
  --sp-5: 1.5rem;   /* 24 */
  --sp-6: 2rem;     /* 32 */
  --sp-7: 3rem;     /* 48 */

  --sp-section:      clamp(2.5rem, 1.5rem + 4vw, 5rem);     /* 40 → 80 */
  --sp-shell-gutter: clamp(1rem, 4vw, 2rem);                /* 16 → 32 */
  --sp-card-pad:     clamp(1rem, 0.6rem + 1.5vw, 1.75rem);  /* 16 → 28 */
  --sp-hero-y:       clamp(2rem, 1rem + 4vw, 4.5rem);       /* 32 → 72 */

  /* ─── Motion ───────────────────────────────────────────────
     Subtle = Linear-grade. Always pair a duration with an easing. */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-mid:  220ms;
  --dur-slow: 380ms;

  /* ─── Semantic aliases ─────────────────────────────────────
     Bridge the canvas's --sf-* / --p-* / --st-* tokens to the
     semantic names component CSS uses. Changing one of these
     re-themes a category without hunting through component files. */
  --bg-page:        var(--sf-canvas);
  --bg-surface:     var(--sf-surface);
  --bg-surface-2:   var(--sf-surface-2);
  --bg-elevated:    var(--sf-surface);
  --fg-default:     var(--sf-text);
  --fg-secondary:   var(--sf-text-2);
  --fg-tertiary:    var(--sf-text-3);
  --border-default: var(--sf-border);
  --border-strong:  var(--sf-border-strong);

  --accent:       var(--p-600);  /* light theme: darker lime for AA on white */
  --accent-fg:    #ffffff;
  --accent-soft:  rgba(101, 163, 13, 0.10);
  --accent-glow:  rgba(101, 163, 13, 0.18);

  --success: var(--st-success);
  --warning: var(--st-warn);
  --danger:  var(--st-danger);
  --info:    var(--st-info);

  /* Compact shadows (canvas has --sh-sm/md/lg/focus; reuse via alias) */
  --sh-1:    var(--sh-sm);
  --sh-2:    var(--sh-md);
  --sh-3:    var(--sh-lg);
  --sh-glow: 0 6px 22px var(--accent-glow);
}

/* ─── Dark theme overrides ─ flip accent + accent-soft/glow ─── */
html.dark {
  --accent:      var(--p-400);     /* brighter lime on dark for contrast */
  --accent-fg:   #0c0d10;
  --accent-soft: rgba(163, 230, 53, 0.10);
  --accent-glow: rgba(163, 230, 53, 0.22);
  /* All other --bg-* / --fg-* / --border-* tokens already flip via the
     existing design-system.css .dark rules — semantic aliases reflect
     those because they use var() chains. */
}

/* ─── prefers-reduced-motion ─ zero out duration tokens ────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-mid:  0ms;
    --dur-slow: 0ms;
  }
}