/* ============================================================
   COBALT DESIGN TOKENS
   Single source of design tokens for the rally portal concept.
   Cobalt palette, light + dark, two densities. Every screen in
   the portal reads its color, type, space and radius values from
   here - nothing hardcoded downstream.
   ------------------------------------------------------------
   Layer 1:   primitive ramps (--pr-/--ac- brand, --nt- neutral),
              locked to the cobalt palette
   Layer 2:   semantic tokens (light in :root, dark overrides)
   Layer 3:   density modes (.density-consumer / .density-ops)
   Components read ONLY layers 2 and 3 (plus the always-dark
   fixtures, which read the --nt- fixture anchors).
   ============================================================ */

:root{
  /* ---- Layer 1 · primitive brand ramps: confident blue primary, sky accent.
     --pr-* = primary ramp, --ac-* = accent ramp. Components and semantic
     tokens (Layer 2) read these instead of a literal hex, so the whole
     canvas re-derives from one place. Coaching carries magenta so it
     reads apart from the primary blue. ---- */
  --pr-300:#93c5fd; --pr-400:#60a5fa; --pr-500:#3b82f6; --pr-600:#2563eb;
  --pr-700:#1d4ed8; --pr-800:#1e40af; --pr-950:#0b1a45;
  --ac-300:#7dd3fc; --ac-400:#38bdf8; --ac-500:#0ea5e9; --ac-700:#0369a1;

  /* ---- Layer 1 · primitive neutral ramp (cool blue-gray) ----
     --nt-* = the neutral (surface/ink/line) ramp the whole canvas is built
     from. Semantic surface, ink, line and chart-chrome tokens read --nt-*
     in BOTH modes, so this one ramp carries the room's temperature
     everywhere - a tinted charcoal / paper, never a colored wash.
     -l and -d = the light and dark semantic ink+line anchors; the chrome-,
     fix-, kds- and bezel- anchors = the always-dark fixtures (app-shell
     nav, device stage, chart tip, kitchen display), which ignore the theme
     toggle but still carry the palette's neutral hue. */
  --nt-0:#ffffff;
  --nt-25:#fbfcfd; --nt-50:#f4f5f8; --nt-100:#ebeef2; --nt-150:#e1e4ea;
  --nt-200:#d4d9e2; --nt-300:#b8becb; --nt-400:#959dab; --nt-500:#757d8c;
  --nt-600:#5c6472; --nt-700:#474e5b; --nt-800:#2f353f; --nt-850:#232831;
  --nt-900:#171b22; --nt-925:#12151b; --nt-950:#0d0f14;
  --nt-ink-l:#141922;  --nt-ink2-l:#515967; --nt-ink3-l:#838b99;
  --nt-line-l:#e3e6ec; --nt-lineS-l:#ccd1db; --nt-grid-l:#e8ebef;
  --nt-ink-d:#eef1f7;  --nt-ink2-d:#adb4c1; --nt-ink3-d:#767d8a;
  --nt-line-d:#282d37; --nt-lineS-d:#3a404c; --nt-grid-d:#262a33;
  --nt-fix-ink:#f3f6fa;
  --nt-chrome-ink:#e6e9ef; --nt-chrome-ink2:#bcc3ce; --nt-chrome-ink3:#9199a7;
  --nt-chrome-cap:#828996; --nt-chrome-dim:#636a77;  --nt-chrome-grp:#585e6b;
  --nt-bezel:#0e1117; --nt-bezel-hl:#262a33;
  --nt-kds-bg:#0b0e12;  --nt-kds-sf:#171b22;   --nt-kds-sf2:#21252e; --nt-kds-sf3:#2b313b;
  --nt-kds-ink2:#b2b9c6; --nt-kds-ink3:#767e8c; --nt-kds-line:#282d37; --nt-kds-lineS:#3d434d;

  /* hero-number card text/glow (sits on the fixed primary gradient) */
  --hero-lbl:#bcd3fb; --hero-delta:#7dd3fc; --hero-tag:#9fc0f8; --hero-glow:rgba(125,211,252,.28);

  /* ---- Layer 2 · semantic: LIGHT ---- */
  color-scheme: light;
  --bg:            var(--nt-50);
  --surface:       var(--nt-0);
  --surface-2:     var(--nt-100);
  --surface-3:     var(--nt-150);
  --overlay:       rgba(11,17,14,.48);
  --ink:           var(--nt-ink-l);
  --ink-2:         var(--nt-ink2-l);
  --ink-3:         var(--nt-ink3-l);
  --line:          var(--nt-line-l);
  --line-strong:   var(--nt-lineS-l);

  --brand:         var(--pr-600);
  --brand-strong:  var(--pr-700);
  --brand-ink:     var(--pr-700);
  --brand-tint:    #dbeafe;
  --brand-tint-ln: #bfdbfe;
  --on-brand:      #ffffff;
  --accent:        var(--ac-500);
  --accent-ink:    var(--ac-700);
  --accent-tint:   #e0f2fe;

  /* departments: base = chart/solid mark · tint = wash · ink = text on tint */
  --courts:        #0d9488; --courts-tint:#e2f5f2;  --courts-ln:#bde8e1;  --courts-ink:#0b6b62;
  --fnb:           #d97706; --fnb-tint:#fdf1e0;     --fnb-ln:#f4dcb4;     --fnb-ink:#92550a;
  --coaching:      #db2777; --coaching-tint:#fbe9f2; --coaching-ln:#f5c6dd; --coaching-ink:#b0175f;
  --membership:    #7c3aed; --membership-tint:#f0eafd; --membership-ln:#ddd0f8; --membership-ink:#6023c0;

  --ok:            #16a34a; --ok-tint:#e4f6eb;   --ok-ink:#15803d;
  --warn:          #ca8a04; --warn-tint:#fbf3d8; --warn-ink:#854d0e;
  --danger:        #dc2626; --danger-tint:#fdeaea; --danger-ink:#b91c1c;

  /* chart chrome */
  --ch-grid:       var(--nt-grid-l);
  --ch-axis:       var(--nt-300);
  --ch-label:      var(--ink-3);
  --ch-track:      #dbe7fd;   /* meter track: lighter step of the cobalt ramp */

  /* elevation */
  --shadow-1: 0 1px 2px rgba(16,28,23,.06);
  --shadow-2: 0 3px 6px -1px rgba(16,28,23,.07), 0 8px 20px -6px rgba(16,28,23,.09);
  --shadow-3: 0 12px 24px -8px rgba(16,28,23,.14), 0 32px 64px -24px rgba(16,28,23,.22);
  --shadow-brand: 0 10px 22px -10px rgba(29,78,216,.5);
  --ring: 0 0 0 3px rgba(37,99,235,.22);

  /* ---- type ---- */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-display: clamp(30px, 5vw, 46px);
  --fs-h1:clamp(25px, 4.5vw, 30px); --fs-h2:clamp(19px, 3.2vw, 21px); --fs-h3:17px;
  --fs-body:15px; --fs-sm:13.5px; --fs-xs:12.5px; --fs-micro:11px;

  /* ---- space · radius ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:56px;
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-full:999px;

  /* ---- Layer 3 defaults (consumer density) ---- */
  --ctl-h:48px; --ctl-h-lg:54px; --ctl-h-sm:34px;
  --ctl-fs:15px; --ctl-r:14px; --card-pad:20px; --gap:14px;
}

/* ---- Layer 2 · semantic: DARK (same ramps, re-anchored) ---- */
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:            var(--nt-950);
  --surface:       var(--nt-900);
  --surface-2:     var(--nt-850);
  --surface-3:     var(--nt-800);
  --overlay:       rgba(3,6,5,.62);
  --ink:           var(--nt-ink-d);
  --ink-2:         var(--nt-ink2-d);
  --ink-3:         var(--nt-ink3-d);
  --line:          var(--nt-line-d);
  --line-strong:   var(--nt-lineS-d);

  --brand:         var(--pr-400);
  --brand-strong:  var(--pr-300);
  --brand-ink:     var(--pr-300);
  --brand-tint:    rgba(96,165,250,.14);
  --brand-tint-ln: rgba(96,165,250,.35);
  --on-brand:      var(--pr-950);
  --accent:        var(--ac-400);
  --accent-ink:    var(--ac-300);
  --accent-tint:   rgba(56,189,248,.13);

  /* dept solids validated for charts on the dark surface */
  --courts:        #0d9488; --courts-tint:rgba(13,148,136,.15);  --courts-ln:rgba(13,148,136,.38);  --courts-ink:#6ed4c6;
  --fnb:           #d97706; --fnb-tint:rgba(217,119,6,.14);      --fnb-ln:rgba(217,119,6,.38);      --fnb-ink:#f0b45c;
  --coaching:      #ec4899; --coaching-tint:rgba(236,72,153,.15); --coaching-ln:rgba(236,72,153,.4); --coaching-ink:#f9a8d4;
  --membership:    #8b5cf6; --membership-tint:rgba(139,92,246,.15); --membership-ln:rgba(139,92,246,.4); --membership-ink:#c3aefb;

  --ok:            #22a952; --ok-tint:rgba(34,197,94,.13);   --ok-ink:#5cd98d;
  --warn:          #ca8a04; --warn-tint:rgba(202,138,4,.14); --warn-ink:#e6c25c;
  --danger:        #e05252; --danger-tint:rgba(220,38,38,.14); --danger-ink:#f09090;

  --ch-grid:       var(--nt-grid-d);
  --ch-axis:       var(--nt-700);
  --ch-label:      var(--ink-3);
  --ch-track:      rgba(37,99,235,.22);

  --shadow-1: 0 1px 2px rgba(0,0,0,.3);
  --shadow-2: 0 3px 8px -1px rgba(0,0,0,.35), 0 10px 24px -8px rgba(0,0,0,.4);
  --shadow-3: 0 16px 32px -10px rgba(0,0,0,.5), 0 40px 80px -30px rgba(0,0,0,.6);
  --shadow-brand: 0 10px 24px -10px rgba(96,165,250,.35);
  --ring: 0 0 0 3px rgba(96,165,250,.3);
}

/* ---- Layer 3 · density modes ---- */
.density-consumer{
  --ctl-h:48px; --ctl-h-lg:54px; --ctl-h-sm:34px;
  --ctl-fs:15px; --ctl-r:14px; --card-pad:20px; --gap:14px;
  font-size:var(--fs-body);
}
.density-ops{
  --ctl-h:34px; --ctl-h-lg:40px; --ctl-h-sm:28px;
  --ctl-fs:13px; --ctl-r:9px; --card-pad:14px; --gap:10px;
  font-size:13px;
}