/* ═══════════════════════════════════════════════════════════════════
   StandbyRoster design tokens — Phase 3 UX overhaul (Aug 2026)
   Single source of truth for color, type, spacing, radii, elevation.
   Spec: docs/ux-redesign-phase2-2026-08-12.md
   RULES: #C9952B (gold-500) never carries text on light surfaces;
   white never sits on gold-500. Use gold-600 on light, gold-300 on dark.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* Brand ink (navy) */
  --ink-900: #0A1628;
  --ink-800: #16233B;
  --ink-700: #1F3251;

  /* Gold — context-split so the accessible choice is the named one */
  --gold-300: #E3B75B;   /* text/icons ON DARK (7.4:1 on ink-900) */
  --gold-500: #C9952B;   /* decoration + gradients only, never text on light */
  --gold-600: #8A6410;   /* text/icons ON LIGHT (5.0:1 on white) */

  /* Neutrals */
  --slate-700: #334155;  /* body text on light (10.4:1) */
  --slate-600: #475569;  /* secondary text on light (7.5:1) */
  --slate-500: #64748B;  /* muted text on light (4.8:1 minimum) */
  --slate-300: #CBD5E1;  /* borders on light */
  --slate-100: #F1F5F9;  /* page tint, zebra rows */
  --surface:   #FFFFFF;

  /* Semantic */
  --success-600: #15803D;
  --success-300: #6EE7A0;
  --warning-700: #B45309;
  --error-600:   #B3261E;
  --error-300:   #FF8A80;
  --info-600:    #1D4ED8;

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

  /* Radii */
  --r-sm: 8px;   /* inputs, chips */
  --r-md: 12px;  /* buttons, product cards */
  --r-lg: 16px;  /* marketing cards, modals */
  --r-pill: 999px;

  /* Elevation */
  --e1: 0 1px 3px rgba(10,22,40,.08);
  --e2: 0 8px 24px rgba(10,22,40,.12);
  --e3: 0 24px 64px rgba(10,22,40,.18);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(138,100,16,.4);
}