/* =============================================================
   Timing Plus — Design Tokens
   Base type + color + semantic CSS variables
   ============================================================= */

/* ------- Webfonts (Google Fonts CDN; swap for local files in /fonts as available) */
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@400;500;700;800;900&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---------- TRACK (neutrals — warm off-black to chalk cream) */
  --track-900: #0B0D10;
  --track-800: #1A1D22;
  --track-700: #2A2D33;
  --track-600: #41454D;
  --track-500: #5C6068;
  --track-400: #8B8F97;
  --track-300: #C9C5BC;
  --track-200: #DDD8CC;
  --track-100: #EDE7DA;
  --track-50:  #F6F2E8;
  --track-0:   #FFFFFF;

  /* ---------- PULSE (primary — race-day red-orange) */
  --pulse-900: #6E1A0E;
  --pulse-700: #C2331E;
  --pulse-500: #FF4A2E;
  --pulse-300: #FF8E78;
  --pulse-100: #FFE2DA;

  /* ---------- CHIP (semantic green — live / go / positive) */
  --chip-700: #007D44;
  --chip-500: #00B765;
  --chip-300: #6BD9A0;
  --chip-100: #DEF8E9;

  /* ---------- LANE (accent blue — water sports / info) */
  --lane-700: #0F4FA8;
  --lane-500: #1B6FE0;
  --lane-300: #7BA8EE;
  --lane-100: #DCE9FB;

  /* ---------- CAUTION (warning amber — cut-offs / late) */
  --caution-700: #B47800;
  --caution-500: #F0A800;
  --caution-100: #FFF1CC;

  /* ---------- SEMANTIC COLOR ROLES */
  --bg:          var(--track-50);
  --bg-alt:      var(--track-100);
  --bg-inverse:  var(--track-900);
  --surface:     var(--track-0);
  --surface-alt: var(--track-100);

  --fg:          var(--track-900);       /* primary text */
  --fg-muted:    var(--track-500);       /* secondary text */
  --fg-subtle:   var(--track-400);       /* tertiary text / placeholders */
  --fg-inverse:  var(--track-0);         /* text on dark */

  --border:        var(--track-300);
  --border-strong: var(--track-700);

  --accent:        var(--pulse-500);
  --accent-hover:  var(--pulse-700);
  --accent-soft:   var(--pulse-100);
  --accent-fg:     var(--track-0);       /* text on accent */

  --positive:      var(--chip-500);
  --positive-soft: var(--chip-100);
  --info:          var(--lane-500);
  --info-soft:     var(--lane-100);
  --warning:       var(--caution-500);
  --warning-soft:  var(--caution-100);

  /* ---------- TYPE FAMILIES */
  --font-display: 'Big Shoulders Display', 'Archivo Narrow', 'Impact', system-ui, sans-serif;
  --font-body:    'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPE SCALE (rem-based; 1rem = 16px) */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;

  /* ---------- LINE HEIGHTS */
  --lh-tight:  1.04;   /* display headlines */
  --lh-snug:   1.2;    /* sub-headlines */
  --lh-normal: 1.5;    /* body */
  --lh-loose:  1.7;    /* long-form prose */

  /* ---------- LETTER SPACING */
  --ls-tight:  -0.02em;  /* big display */
  --ls-snug:   -0.01em;
  --ls-normal: 0;
  --ls-wide:    0.04em;   /* small caps eyebrows */
  --ls-wider:   0.12em;   /* eyebrow / pre-title */

  /* ---------- WEIGHTS */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   800;

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

  /* ---------- RADII */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-pill: 999px;

  /* ---------- BORDERS */
  --border-1: 1px solid var(--border);
  --border-strong-1: 1px solid var(--border-strong);
  --finish-line: 4px solid var(--pulse-500);

  /* ---------- SHADOWS */
  --shadow-1: 0 1px 2px rgba(11,13,16,0.06);
  --shadow-2: 0 4px 12px rgba(11,13,16,0.08);
  --shadow-3: 0 12px 32px rgba(11,13,16,0.12);

  /* ---------- MOTION */
  --ease-sharp: cubic-bezier(.2,.7,.2,1);
  --dur-1: 100ms;
  --dur-2: 150ms;
  --dur-3: 200ms;
}

/* =============================================================
   BASE / RESET LIGHT
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =============================================================
   SEMANTIC TYPE STYLES (use as classes or compose into elements)
   ============================================================= */

.t-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--pulse-500);
  line-height: 1;
}

.t-display-xl, h1.display {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-56), 8vw, var(--fs-96));
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}

.t-display-lg {
  font-family: var(--font-display);
  font-size: var(--fs-72);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  margin: 0;
}

h1, .t-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-56);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  margin: 0 0 var(--s-5);
}

h2, .t-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-40);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  text-transform: uppercase;
  margin: 0 0 var(--s-4);
}

h3, .t-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  text-transform: uppercase;
  margin: 0 0 var(--s-3);
}

h4, .t-h4 {
  font-family: var(--font-body);
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  margin: 0 0 var(--s-2);
}

p, .t-body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg);
  margin: 0 0 var(--s-4);
  max-width: 64ch;
  text-wrap: pretty;
}

.t-lead {
  font-family: var(--font-body);
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--fg-muted);
}

.t-small, small {
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.t-caption {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.t-label {
  font-family: var(--font-body);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--fg);
}

/* Race-time / split / stat -- always tabular */
.t-time, code, kbd, .t-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-medium);
  letter-spacing: 0;
}

.t-time-xl {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-72);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -0.02em;
}

.t-stat {
  font-family: var(--font-display);
  font-size: var(--fs-72);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
}

/* =============================================================
   LINKS
   ============================================================= */
a {
  color: var(--pulse-500);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-sharp);
}
a:hover {
  color: var(--pulse-700);
  text-decoration: underline;
  text-underline-offset: 4px;
}
a:focus-visible {
  outline: 2px solid var(--pulse-500);
  outline-offset: 2px;
  border-radius: 2px;
}

/* =============================================================
   UTILITY: finish-line divider
   ============================================================= */
.finish-line {
  display: block;
  width: 48px;
  height: 4px;
  background: var(--pulse-500);
  margin: var(--s-5) 0;
}