/* ============================================================
   FrontlineQSR — Platform Design Tokens (canonical)
   The ONE source of truth for color, type, spacing, radius,
   shadow, and motion across the entire FrontlineQSR Platform.

   Platform Evolution — Phase 1. Presentation only.
   This file DEFINES tokens; it changes no page until a surface
   links it and points its own :root at these values. Adoption
   is per-surface and reversible (hosting-only revert).

   Canonical tokens use the --fq-* namespace. A compatibility
   layer below maps the existing commercial + pilot variable
   names to the same canonical values, so surfaces can adopt
   the system without editing markup or component CSS.
   ============================================================ */

:root {
  /* ---------- Brand ---------- */
  --fq-brand-teal:   #22d3ee;
  --fq-brand-blue:   #3b82f6;
  --fq-brand-green:  #34d399;
  --fq-teal-deep:    #0e9bb0;
  --fq-blue-deep:    #1f4e79;
  --fq-green-strong: #22c55e;
  --fq-grad-brand:      linear-gradient(135deg, #22d3ee 0%, #3b82f6 55%, #34d399 100%);
  --fq-grad-brand-soft: linear-gradient(135deg, rgba(34,211,238,.16), rgba(59,130,246,.13), rgba(52,211,153,.13));
  --fq-brand-glow:   rgba(34,211,238,.18);

  /* ---------- Surfaces (dark navy family) ---------- */
  --fq-bg:        #07111f;  /* app background        */
  --fq-bg-deep:   #050c18;  /* deepest / gradients   */
  --fq-bg-raised: #0b1728;  /* raised sections       */
  --fq-panel:     #0d1828;  /* panels                */
  --fq-surface-1: rgba(255,255,255,.035);
  --fq-surface-2: rgba(255,255,255,.06);
  --fq-surface-3: rgba(255,255,255,.09);
  --fq-card:      rgba(255,255,255,.05);
  --fq-card-2:    rgba(255,255,255,.06);

  /* ---------- Lines & borders ---------- */
  --fq-border:        rgba(255,255,255,.09);
  --fq-border-strong: rgba(255,255,255,.12);
  --fq-line:          rgba(255,255,255,.08);

  /* ---------- Text tiers ---------- */
  --fq-text:        #f4f8ff;
  --fq-text-soft:   rgba(255,255,255,.84);
  --fq-text-muted:  rgba(255,255,255,.62);
  /* .44 -> .50 on 27 Oct 2026 (WCAG AA contrast correction).
     Measured: at .44 this token produced 4.19–4.36:1 across the five backgrounds
     it is used on — marginally under the 4.5:1 AA minimum for normal text, and
     the cause of all 20 contrast failures Lighthouse flagged (brand tagline,
     footer column titles, stage numbers 01–07, chain arrows, shot captions).
     .465 is the bare minimum that passes; .50 was chosen instead so antialiasing
     and display variance cannot push a value back under. Range becomes 4.99–5.32.
     Deliberately the smallest change that clears AA with margin — the muted tone
     and the dark premium identity are preserved. */
  --fq-text-faint:  rgba(255,255,255,.50);
  --fq-text-on-light: #0f172a;

  /* ---------- Status ---------- */
  --fq-good:        #86efac;
  --fq-good-strong: #22c55e;
  --fq-bad:         #fca5a5;
  --fq-bad-strong:  #ef4444;
  --fq-warn:        #f59e0b;
  --fq-pending:     #fcd34d;
  --fq-info:        #7dd3fc;

  /* ---------- Radius scale ---------- */
  --fq-radius-sm: 10px;
  --fq-radius:    12px;
  --fq-radius-lg: 16px;
  --fq-radius-xl: 20px;

  /* ---------- Shadow scale ---------- */
  --fq-shadow-card: 0 8px 22px rgba(0,0,0,.22);
  --fq-shadow-md:   0 14px 36px rgba(0,0,0,.30);
  --fq-shadow-lg:   0 24px 60px rgba(0,0,0,.42);

  /* ---------- Typography ---------- */
  --fq-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --fq-fs-display: clamp(34px, 5vw, 58px);
  --fq-fs-h1:      clamp(26px, 3vw, 34px);
  --fq-fs-h2:      22px;
  --fq-fs-h3:      17px;
  --fq-fs-body:    15px;
  --fq-fs-small:   13px;
  --fq-fs-tiny:    11.5px;

  /* ---------- Spacing scale (4px base) ---------- */
  --fq-space-1: 4px;
  --fq-space-2: 8px;
  --fq-space-3: 12px;
  --fq-space-4: 16px;
  --fq-space-5: 24px;
  --fq-space-6: 32px;
  --fq-space-7: 48px;
  --fq-space-8: 64px;

  /* ---------- Motion ---------- */
  --fq-ease:  cubic-bezier(.22,.61,.36,1);
  --fq-fast:  .15s;
  --fq-med:   .2s;

  /* ---------- Layout ---------- */
  --fq-sidebar-w:  248px;
  --fq-content-max: 1440px;

  /* ============================================================
     COMPATIBILITY LAYER
     Existing commercial + pilot variable names remapped to the
     canonical values. When a surface adopts tokens (by linking
     this file and removing its own :root definitions), all of
     its existing references resolve to the unified palette with
     zero markup change. The one intentional convergence: the
     pilot's legacy gold accent (--accent) now maps to brand teal.
     ============================================================ */

  /* backgrounds / panels */
  --bg:        var(--fq-bg);
  --bg-1:      var(--fq-bg);
  --bg-2:      var(--fq-bg-raised);
  --bg-3:      var(--fq-bg-deep);
  --panel:     var(--fq-panel);
  --panel-bg:  var(--fq-surface-1);
  --panel-soft:   var(--fq-surface-1);
  --panel-soft-2: var(--fq-surface-1);
  --card:      var(--fq-card);
  --card2:     var(--fq-card-2);
  --card-bg:   var(--fq-card);
  --card-bg-soft: var(--fq-card-2);
  --surface-0: var(--fq-surface-1);
  --surface-1: var(--fq-surface-1);
  --surface-2: var(--fq-surface-2);
  --surface-3: var(--fq-surface-3);
  --surface-4: var(--fq-surface-3);

  /* borders / lines */
  --border:        var(--fq-border);
  --border2:       var(--fq-border-strong);
  --border-strong: var(--fq-border-strong);
  --border-1:      var(--fq-border-strong);
  --border-2:      var(--fq-border);
  --border-3:      var(--fq-line);
  --panel-border:  var(--fq-border);
  --card-border:   var(--fq-border);
  --line:          var(--fq-line);

  /* text */
  --text:        var(--fq-text);
  --text-soft:   var(--fq-text-soft);
  --text-muted:  var(--fq-text-muted);
  --muted:       var(--fq-text-muted);
  --muted-2:     var(--fq-text-faint);
  --muted2:      var(--fq-text-faint);
  --text-on-light:   var(--fq-text-on-light);

  /* accents / status (legacy names → canonical; gold retired) */
  --accent:    var(--fq-brand-teal);
  --cyan:      var(--fq-brand-teal);
  --coaching:  var(--fq-brand-teal);
  --success:   var(--fq-green-strong);
  --danger:    var(--fq-bad-strong);
  --focus:     var(--fq-warn);
  --good:        var(--fq-good);
  --good-strong: var(--fq-good-strong);
  --bad:         var(--fq-bad);
  --bad-strong:  var(--fq-bad-strong);
  --pending:     var(--fq-pending);
  --warn:        var(--fq-warn);
  --info:        var(--fq-info);
  --brand-glow:  var(--fq-brand-glow);

  /* radius / shadow / layout */
  --radius:    var(--fq-radius-lg);
  --radius-sm: var(--fq-radius);
  --radius-lg: var(--fq-radius-xl);
  --shadow-card: var(--fq-shadow-card);
  --shadow-md:   var(--fq-shadow-md);
  --shadow-lg:   var(--fq-shadow-lg);
  --sidebar-w:   var(--fq-sidebar-w);
  --content-max: var(--fq-content-max);
}