/* ─────────────────────────────────────────────────────────────
   SplitKit Design System — Tokens
   Ported from splitkit-wireframes/assets/tokens.css.
   Update upstream first, then mirror here (per prd/11-design-system.md).
   ───────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Nunito';
  src: url('/fonts/Nunito-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('/fonts/Nunito-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand */
  --navy:           #0D2645;
  --navy-2:         #0A1F38;
  --navy-3:         #162D4F;
  --brand-blue:     #5099CC;
  --sky:            #38BDF8;
  --orange:         #F97316;
  --gold:           #D4AF37;

  /* Participant-chrome brand aliases — Phase 1 universal SplitKit defaults.
   * Per the 2026-05-15 branding pivot: per-event primary/accent injection
   * is removed; every event renders with these values. Stylesheets reference
   * `var(--brand-primary, var(--navy))` etc., which now resolves to the
   * defined value here (the fallback is belt-and-suspenders for anything
   * outside the cascade). Power users can still flip the whole chrome with
   * `:root { --brand-primary: …; }` in the timer's customCss textarea. */
  --brand-primary:    var(--navy);
  --brand-accent:     var(--brand-blue);
  --brand-on-primary: var(--white);

  /* Neutrals */
  --white:          #FFFFFF;
  --off-white:      #F8FAFC;
  --slate-50:       #F8FAFC;
  --slate-100:      #F1F5F9;
  --slate-200:      #E2E8F0;
  --slate-300:      #CBD5E1;
  --slate-400:      #94A3B8;
  --slate-500:      #64748B;
  --slate-600:      #475569;
  --slate-700:      #334155;
  --slate-800:      #1E293B;
  --slate-900:      #0F172A;
  --border:         #E2E8F0;
  --muted:          #94A3B8;
  --body:           #475569;

  /* Tints */
  --blue-tint:      #EFF6FF;
  --blue-tint-bd:   #BFDBFE;
  --orange-tint:    #FFF7ED;
  --orange-tint-bd: #FED7AA;
  --green-tint:     #F0FDF4;
  --green-tint-bd:  #BBF7D0;

  /* Sky tint pair ("H" redesign) — live-pill background/border on light
   * surfaces. A bluer hue than --blue-tint above (sky family, not blue). */
  --sky-tint:       #E0F2FE;
  --sky-tint-bd:    #BAE6FD;

  /* Status */
  --success:        #22C55E;
  --success-bg:     #F0FDF4;
  --success-accent: #86EFAC;  /* light green for status text on dark surfaces */
  --warning:        #EAB308;
  --warning-bg:     #FEFCE8;
  --warning-accent: #FDE68A;  /* light yellow for status text on dark surfaces */
  --error:          #EF4444;
  --error-bg:       #FEF2F2;
  --error-accent:   #FCA5A5;  /* light red for status text on dark surfaces */
  --info:           #38BDF8;
  --orange-accent:  #FDBA74;  /* light orange for accents */
  --orange-dark:    #EA580C;  /* deeper orange for gradients */

  /* Light-safe semantic deeps ("H" redesign) — legible status tones on white.
   * The dark pastels above (--success-accent #86EFAC etc.) are kept for the
   * dark/outdoor surfaces; these are their light-surface counterparts. */
  --sky-deep:       #0369A1;  /* live-pill text + on-course status on light */
  --success-deep:   #16A34A;  /* finished/final text + tick on light */
  --orange-press:   var(--orange-dark);  /* alias — pressed/deep orange (#EA580C) */

  /* Dark surfaces */
  --dark-card:      rgba(255, 255, 255, 0.04);
  --dark-card-h:    rgba(255, 255, 255, 0.07);
  --dark-border:    rgba(255, 255, 255, 0.07);
  --dark-border-2:  rgba(255, 255, 255, 0.04);
  --dark-divider:   rgba(255, 255, 255, 0.06);
  --dark-muted:     #94A3B8;
  --dark-muted-2:   #4A6280;
  --dark-muted-3:   #2E4A6A;

  /* Type */
  --font-wordmark:  'Nunito', 'Trebuchet MS', Arial, sans-serif;
  --font-ui:        'Space Grotesk', -apple-system, system-ui, sans-serif;
  --font-data:      'Space Grotesk', monospace;

  --text-2xs:  10px;
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   15px;
  --text-lg:   18px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-5xl:  64px;

  --w-regular:  400;
  --w-medium:   500;
  --w-semi:     600;
  --w-bold:     700;
  --w-black:    800;

  /* Spacing (4px base) */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* Radius */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  20px;
  --r-full: 9999px;

  /* Radius role aliases ("H" redesign) — role-based hierarchy layered on top
   * of the raw scale. Surface (outer card / panel) → Card → Control → Pill. */
  --r-surface: var(--r-xl);   /* 16px — outer cards / panels */
  --r-card:    var(--r-lg);   /* 12px — inner cards */
  --r-control: var(--r-md);   /* 8px  — inputs / chips / buttons */
  --r-pill:    var(--r-full); /* fully rounded — pills / dots */

  /* Shadows */
  --sh-1: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --sh-2: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --sh-3: 0 20px 40px rgba(0,0,0,0.14);
  --sh-dark-1: 0 1px 4px rgba(0,0,0,0.3);
  --sh-dark-2: 0 4px 16px rgba(0,0,0,0.4);

  /* Borders-over-shadows pair ("H" redesign) — new light surfaces lean on a
   * 1px hairline + this near-invisible whisper shadow instead of heavy boxes. */
  --hairline:   var(--slate-100);          /* intra-card divider name */
  --sh-whisper: 0 1px 2px rgba(13,38,69,.05); /* the ONLY shadow new light surfaces use */

  /* Transitions */
  --t-fast: all 0.15s ease;
  --t-base: all 0.2s ease;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--navy);
  background: var(--off-white);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }
img { display: block; max-width: 100%; }
table { border-collapse: collapse; }

/* ── Wordmark ── */
.sk-wordmark {
  font-family: var(--font-wordmark);
  font-weight: var(--w-black);
  letter-spacing: -0.02em;
}
.sk-wordmark .split { color: var(--navy); }
.sk-wordmark .kit   { color: var(--brand-blue); }
.sk-wordmark.inv .split { color: var(--white); }
.sk-wordmark.inv .kit   { color: var(--sky); }