/**
 * sat_access/web/assets/tokens.css
 *
 * Single source of truth for SAT Connector design tokens.
 *
 * Lifted from _partials/premium_chrome.php (Round-18 inline <style> :root block)
 * as the first step of the Production Luxury plan
 * (docs/plans/2026-05-23-sat-connector-production-luxury/step-01-...).
 *
 * Consumed by: premium_chrome.php (linked first), workspace.css, cfdi_grid.css,
 * mobile.css, and any future stylesheet. NO file outside this one should
 * declare a --lux-* token. NO file outside this one should declare a raw hex
 * colour for a value that maps to a token defined here.
 *
 * Token naming is "role-based, not value-based" (Stripe convention):
 *   --lux-bg-1 means "page background," not "the colour #0d1117."
 *   The value can change in a future round without touching consumers.
 */

/* Mobile mixed-theme fix (2026-06-02): explicit color-scheme: light
 * tells the browser to render UA defaults in light mode. */
html { color-scheme: light; }

:root {
  color-scheme: light;

  /* ─── Brand · burgundy/maroon + warm gold accents ─────────────────── */
  --lux-purple-deep:    #5f1027;  /* deep burgundy/maroon */
  --lux-purple-base:    #8a1538;  /* brand burgundy */
  --lux-purple-bright:  #a82348;  /* bright accent burgundy */
  --lux-purple-glow:    rgba(138, 21, 56, 0.15);
  --lux-gold-deep:      #b28c5a;
  --lux-gold-warm:      #c49a6c;  /* taupe/gold */
  --lux-gold-pale:      #e0caaa;
  --lux-gold-cream:     #faf5ed;
  --lux-gold-glow:      rgba(196, 154, 108, 0.15);
  --lux-gold-proof:     #a38057;  /* legible gold for proof borders/text */

  /* ─── Surfaces · 5-step light cream scale ────────────────────────────── */
  --lux-bg-0:           #f0e8e0;  /* deepest backdrop paper */
  --lux-bg-1:           #faf8f5;  /* page background / warm cream paper */
  --lux-bg-2:           #ffffff;  /* raised surface / card white */
  --lux-bg-3:           #f5f0eb;  /* hover surface */
  --lux-bg-4:           rgba(61, 68, 81, 0.16);  /* border / divider */

  /* ─── Text · 5-step contrast scale (inverted) ────────────────────────────── */
  --lux-text-0:         #1c1810;  /* high-contrast headings */
  --lux-text-1:         #2f3744;  /* body ink */
  --lux-text-2:         #5f6672;  /* secondary */
  --lux-text-3:         #677180;  /* muted */
  --lux-text-4:         #6b7280;  /* faint · lifted for desktop WCAG AA (4.56:1 on cream; was sub-AA 2.19:1). Mobile already used this value. */

  /* ─── Semantic ────────────────────────────────────────────────── */
  --lux-success:        #087f5b;
  --lux-success-soft:   #e4f7ef;
  --lux-success-bright: #087f5b;
  --lux-warn:           #9a5b00;
  --lux-warn-soft:      #fff4dd;
  --lux-error:          #b4232f;
  --lux-error-soft:     #fee8ea;
  --lux-error-bright:   #b4232f;
  --lux-info:           #0f5f9c;
  --lux-info-soft:      #e7f0ff;
  --lux-info-bright:    #0f5f9c;

  /* ─── Enterprise fiscal semantics · proof without color-only meaning ─ */
  --lux-fiscal-positive: var(--lux-success-bright);
  --lux-fiscal-negative: var(--lux-error-bright);
  --lux-fiscal-neutral:  var(--lux-text-2);
  --lux-fiscal-pending:  var(--lux-warn);
  --lux-audit-proof:     var(--lux-gold-pale);

  /* ─── Iter-8 coherence pass · close-match hex promoted to tokens.
   *     Each value is the EXACT pre-existing hex from across the
   *     codebase — zero pixel drift on adoption.
   * ────────────────────────────────────────────────────────────── */
  --lux-text-bright:    #1c1810;   /* headline / hero text */
  --lux-text-body-alt:  #2f3744;   /* body alt */
  --lux-border:         rgba(61, 68, 81, 0.16);   /* default border / divider */
  --lux-border-strong:  rgba(61, 68, 81, 0.28);   /* stronger separators */
  --lux-bg-card:        #ffffff;   /* common card bg */
  --lux-bg-card-2:      #faf8f5;   /* card bg variant */
  --lux-bg-deepest:     #f0e8e0;   /* deepest page bg */
  --lux-bg-deeper:      #f5f0eb;   /* near-deepest */
  --lux-bg-nested:      #fcfbf9;   /* nested surface */
  --lux-purple-soft:    var(--lux-purple-base);   /* alias → base; role name kept for back-compat (same #8a1538) */
  --lux-purple-vivid:   var(--lux-purple-base);   /* alias → base; CTA / focus ring (same #8a1538) */
  --lux-purple-pale:    rgba(138, 21, 56, 0.08);   /* BACKGROUND tint ONLY (8% alpha) — NEVER use as a text color (use --lux-purple-proof) */
  --lux-purple-proof:   #7d4f50;                   /* legible quiet burgundy-brown — the safe TEXT color for quiet/secondary links (≈7:1 on cream) */
  --lux-purple-hover:   rgba(138, 21, 56, 0.10);   /* canonical burgundy hover/active tint — replaces the retired violet (110,64,201) hover era */
  --lux-purple-deeper-soft: #5f1027; /* deep burgundy gradient anchor */
  --lux-gold-bright:    #c49a6c;   /* bright gold accent */
  --lux-gold-tan:       #a38057;   /* warm gold-tan label */

  /* ─── Typography ──────────────────────────────────────────────── */
  /* Luxury iter 17 · font stack starts with optional web fonts
     ('Inter', 'JetBrains Mono') and falls back to system fonts so
     first paint never blocks on a font download. If a future round
     adds @font-face declarations, use `font-display: swap` so text
     renders in the fallback immediately and swaps when the web font
     loads. Today the chain is system-only → zero font-load latency. */
  --lux-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --lux-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  --lux-fs-xs:    0.72rem;
  --lux-fs-sm:    0.82rem;
  --lux-fs-base:  0.92rem;
  --lux-fs-md:    1.05rem;
  --lux-fs-lg:    1.25rem;
  --lux-fs-xl:    1.6rem;
  --lux-fs-2xl:   2rem;
  --lux-fs-3xl:   2.5rem;
  --lux-lh-tight: 1.2;
  --lux-lh-snug:  1.4;
  --lux-lh-base:  1.55;

  /* ─── Spacing scale (rem · multiples of 0.25) ─────────────────── */
  --lux-sp-1:  0.25rem;
  --lux-sp-2:  0.5rem;
  --lux-sp-3:  0.75rem;
  --lux-sp-4:  1rem;
  --lux-sp-5:  1.25rem;
  --lux-sp-6:  1.5rem;
  --lux-sp-8:  2rem;
  --lux-sp-10: 2.5rem;
  --lux-sp-12: 3rem;

  /* ─── Border radius ───────────────────────────────────────────── */
  --lux-r-sm: 6px;
  --lux-r-md: 10px;
  --lux-r-lg: 14px;
  --lux-r-xl: 20px;
  --lux-r-pill: 999px;

  /* ─── Enterprise interaction contracts ──────────────────────────── */
  --lux-touch-target: 44px;
  --lux-focus-ring: 0 0 0 2px var(--lux-gold-pale), 0 0 0 5px rgba(244,222,159,0.16);
  --lux-surface-ring: 0 0 0 1px rgba(244,222,159,0.08), var(--lux-shadow-2);
  --lux-z-nav: 70;
  --lux-z-dropdown: 80;
  --lux-z-drawer: 1000;
  --lux-z-overlay: 2500;

  /* ─── Multi-layer shadows · gives genuine depth ───────────────── */
  --lux-shadow-1: 0 1px 2px rgba(0,0,0,0.20);
  --lux-shadow-2: 0 4px 12px -4px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.18);
  --lux-shadow-3: 0 12px 28px -8px rgba(0,0,0,0.45), 0 4px 8px -2px rgba(0,0,0,0.22);
  --lux-shadow-4: 0 24px 48px -12px rgba(0,0,0,0.55), 0 8px 16px -4px rgba(0,0,0,0.30);
  --lux-shadow-gold: 0 8px 28px -8px var(--lux-gold-glow);
  --lux-shadow-purple: 0 8px 28px -8px var(--lux-purple-glow);
  --lux-shadow-inset-hi: inset 0 1px 0 rgba(255,255,255,0.06);
  --lux-shadow-inset-gold: inset 0 1px 0 rgba(244,222,159,0.15);

  /* ─── Easing curves · for tasteful motion ─────────────────────── */
  --lux-duration-fast:   120ms;
  --lux-duration-base:   180ms;
  --lux-duration-slow:   260ms;
  --lux-ease-out:       cubic-bezier(0.25, 1, 0.5, 1);
  --lux-ease-out-soft:  cubic-bezier(0.16, 1, 0.3, 1);
  --lux-ease-out-back:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --lux-ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);

  /* ─── Enterprise density rhythm ────────────────────────────────── */
  --lux-control-height-sm: 36px;
  --lux-control-height-md: 44px;
  --lux-control-height-lg: 52px;

  /* Mobile design-system tokens · app-design Step 01 (additive; full spec in
   * docs/design/mobile-system.md). Aliases reuse single-source values. */
  --lux-fs-2xs: 0.6875rem;                  /* 11px min · labels/eyebrows */
  --lux-touch-min: var(--lux-touch-target); /* 44px floor */
  --lux-touch-comfortable: 48px;            /* primary actions */
  --lux-motion-fast: var(--lux-duration-fast); /* 120ms feedback */
  --lux-motion-base: 240ms;
  --lux-ease-standard: cubic-bezier(0.2, 0.7, 0.3, 1); /* couch couchFadeIn ease */
}

/* Reduce motion if the user has asked for it (a11y baseline). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --lux-ease-out:       linear;
    --lux-ease-out-soft:  linear;
    --lux-ease-out-back:  linear;
    --lux-ease-in-out:    linear;
    --lux-duration-fast:  1ms;
    --lux-duration-base:  1ms;
    --lux-duration-slow:  1ms;
    --lux-ease-standard:  linear;  /* Step 01 literals clamp too */
    --lux-motion-base:    1ms;
  }
}

/* ─── Mobile readability pass (2026-06-10) ──────────────────────────────────
 * On phones the muted greys + smallest type sat below comfortable reading
 * (--lux-text-4 was 2.19:1 on cream — sub-AA, effectively invisible). Darken the
 * muted tiers to clear AA and lift the two smallest font tiers. Color/size only —
 * no structural/layout change; light-theme tokens only. */
@media (max-width: 640px) {
  :root {
    --lux-text-2: #4b525e;   /* secondary · #5f6672 → stronger */
    --lux-text-3: #545b67;   /* muted     · 4.66:1 → 6.45:1 */
    /* --lux-text-4 now meets AA at the base for all viewports → mobile override removed (iter 6). */
    --lux-fs-xs:  0.78rem;   /* 0.72rem → 0.78rem */
    --lux-fs-sm:  0.86rem;   /* 0.82rem → 0.86rem */
  }
}