/* ============================================================================
   4DOS · Fourth Dimension Sports · Design Tokens
   Single source of truth for colour, type, spacing, radius, elevation, motion.
   Change a value here and every page + component updates.
   Themes: `daylight` (default, light) and `navy` (dark) via [data-theme].
   ============================================================================ */

:root {
  /* ── Brand palette (registered, do not add colours outside this set) ────── */
  --color-white:            #FFFFFF;
  --color-navy:             #1B2A4A;   /* foreground / dark ground             */
  --color-brand-blue:       #1865D1;   /* the ONE interactive accent          */
  --color-cloud:            #F7F8FA;   /* surfaces                            */
  --color-slate:            #6B7B95;   /* body text / metadata                */
  --color-mist:             #EBEDF2;   /* borders / dividers                  */

  /* ── Sanctioned extensions (per DESIGN.md) ──────────────────────────────── */
  --color-brand-blue-hover: #1353AE;   /* pressed/hover state of the accent    */
  --color-amber:            #E8A838;   /* point-light accent · keep ≤10%       */
  --color-grey-mark:        #8993A1;   /* logo tesseract outer hexagon only    */
  --color-ink:              #0F1A2E;   /* deepest navy ground (dark theme)     */

  /* ── Status ramp · DRAFT ────────────────────────────────────────────────
     Not part of the registered brand palette. Kept muted/institutional and
     tuned toward the navy family. Palette-align before production.          */
  --status-success:         #2E8B57;   /* sea green, measured, not neon        */
  --status-success-soft:    #E8F2EC;
  --status-success-on-dark: #5FD495;
  --status-warning:         #B27A16;   /* dark amber (AA text on white)        */
  --status-warning-soft:    #FBF3E1;
  --status-warning-accent:  #E8A838;   /* = brand amber, for dots/bars         */
  --status-danger:          #C94040;
  --status-danger-soft:     #FBEBEB;
  --status-danger-on-dark:  #F07575;
  --status-info:            var(--color-brand-blue);
  --status-info-soft:       #EAF1FC;

  /* ── Typography ─────────────────────────────────────────────────────────── */
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-eyebrow: 12px;   --fs-caption: 13px;  --fs-body: 15px;   --fs-body-lg: 17px;
  --fs-h3: 20px;        --fs-h2: 24px;       --fs-h1: 32px;     --fs-display: 44px;
  --lh-tight: 1.1;      --lh-snug: 1.3;      --lh-body: 1.55;
  --tracking-eyebrow: 0.12em;
  --fw-regular: 400;    --fw-medium: 500;    --fw-semibold: 600;  --fw-bold: 700;  --fw-extra: 800;

  /* ── Spacing · 8-pt scale ───────────────────────────────────────────────── */
  --space-0: 0;    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px; --space-9: 56px;
  --space-10: 64px; --space-12: 96px; --space-15: 120px;

  --container-max: 1152px;
  --gutter-page:    96px;
  --gutter-page-sm: 24px;

  /* ── Radius ─────────────────────────────────────────────────────────────── */
  --radius-xs: 4px;  --radius-sm: 8px;  --radius-button: 12px;
  --radius-chip: 14px; --radius-card: 16px; --radius-xl: 24px; --radius-pill: 9999px;

  /* ── Elevation · navy-tinted (never pure black) ─────────────────────────── */
  --shadow-xs: 0 1px 2px 0 rgba(27,42,74,0.04);
  --shadow-sm: 0 1px 3px 0 rgba(27,42,74,0.05), 0 1px 2px -1px rgba(27,42,74,0.04);
  --shadow-md: 0 4px 10px -3px rgba(27,42,74,0.08), 0 2px 4px -2px rgba(27,42,74,0.04);
  --shadow-lg: 0 10px 24px -6px rgba(27,42,74,0.10), 0 4px 8px -4px rgba(27,42,74,0.05);

  /* ── Motion ─────────────────────────────────────────────────────────────── */
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;
  --ease-out:      cubic-bezier(.16,.84,.30,1);
  --ease-standard: cubic-bezier(.2,.0,.0,1);

  /* ── Semantic layer (themed below): reference THESE in components ───────── */
  --bg-page:        var(--color-white);
  --bg-surface:     var(--color-cloud);
  --bg-surface-2:   var(--color-white);
  --bg-inset:       var(--color-cloud);
  --border:         var(--color-mist);
  --border-strong:  color-mix(in oklab, var(--color-mist) 60%, var(--color-slate));

  --fg-1: var(--color-navy);                                    /* headings     */
  --fg-2: var(--color-slate);                                   /* body         */
  --fg-3: color-mix(in oklab, var(--color-slate) 70%, white);   /* subtle/meta  */
  --fg-interactive: var(--color-brand-blue);
  --fg-link:        var(--color-brand-blue);
  --fg-inverse:     var(--color-white);

  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--color-brand-blue) 35%, transparent);
}

/* ── Daylight (default light system) ──────────────────────────────────────── */
:root,
[data-theme="daylight"] {
  color-scheme: light;
  --bg-page:      var(--color-white);
  --bg-surface:   var(--color-cloud);
  --bg-surface-2: var(--color-white);
  --bg-inset:     var(--color-cloud);
  --border:       var(--color-mist);
  --border-strong:color-mix(in oklab, var(--color-mist) 55%, var(--color-slate));
  --fg-1: var(--color-navy);
  --fg-2: var(--color-slate);
  --fg-3: color-mix(in oklab, var(--color-slate) 70%, white);
}

/* ── Navy (dark ground for hero/keynote/immersive) ─────────────────────────── */
[data-theme="navy"] {
  color-scheme: dark;
  --bg-page:      var(--color-navy);
  --bg-surface:   color-mix(in oklab, var(--color-navy) 88%, white);  /* navy-tinted elevation */
  --bg-surface-2: color-mix(in oklab, var(--color-navy) 94%, white);
  --bg-inset:     var(--color-ink);
  --border:       rgba(255,255,255,0.10);
  --border-strong:rgba(255,255,255,0.20);
  --fg-1: #FFFFFF;
  --fg-2: rgba(255,255,255,0.72);
  --fg-3: rgba(255,255,255,0.46);
  /* light tint of the SAME accent for AA contrast on navy */
  --fg-interactive: color-mix(in oklab, var(--color-brand-blue) 55%, white);
  --fg-link:        color-mix(in oklab, var(--color-brand-blue) 55%, white);
  --status-success: var(--status-success-on-dark);
  --status-danger:  var(--status-danger-on-dark);
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--color-brand-blue) 45%, transparent);
}