/* TriHard design tokens — dark-first. Import once at the app root. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@100,400;100,500;100,600;125,800&family=IBM+Plex+Mono:wght@500;600&display=swap");

:root {
  /* Core palette */
  --th-ink: #101820;
  --th-chalk: #F4F2EC;
  --th-pace: #FF6B1F;          /* brand accent on dark */

  /* Discipline data colours (dark surfaces) */
  --th-swim: #3D8BFF;
  --th-bike: #FF6B1F;
  --th-run:  #C8F03C;
  --th-transition: #9AA3B2;

  /* Semantic — dark (default) */
  --th-bg: var(--th-ink);
  --th-surface: #18222D;
  --th-surface-2: #212D3A;
  --th-line: #2E3B4A;
  --th-text: var(--th-chalk);
  --th-text-muted: #9AA3B2;    /* 7.0:1 on bg */
  --th-accent: var(--th-pace);
  --th-on-accent: var(--th-ink);
  --th-positive: #3FD08A;
  --th-negative: #FF5A5F;

  /* Chart palette — complementary pairs (opposite on the wheel), so any
     two series from the same pair stay distinct where they touch: Ember
     (--th-bike) <-> Azure (--th-swim), Volt (--th-run) <-> Violet, Rose
     <-> Teal, Gold is a highlight-only accent (PRs, form, summits). */
  --th-violet: #9F8CFF;
  --th-rose: #FF5D8F;
  --th-teal: #2DD4BF;
  --th-gold: #FFC857;
  /* HR/power zone ramp, Z1 (easiest) to Z5 (hardest), in Garmin's colours: grey, blue, green, orange, red. */
  --th-z1: #8E97A6; --th-z2: #4C8DF6; --th-z3: #3FB96A; --th-z4: #FF8A3D; --th-z5: #F0524F;

  /* Type */
  --th-font-display: "Archivo", "Arial Black", system-ui, sans-serif; /* use with font-stretch:125%; weight 800 */
  --th-font-ui: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --th-font-data: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --th-text-xs: 12px; --th-text-sm: 14px; --th-text-md: 16px; --th-text-lg: 20px;
  --th-text-xl: 24px; --th-text-2xl: 32px; --th-text-3xl: 48px; --th-text-4xl: 64px;

  /* Space (4px base), radius, motion */
  --th-space-1: 4px; --th-space-2: 8px; --th-space-3: 12px; --th-space-4: 16px;
  --th-space-5: 24px; --th-space-6: 32px; --th-space-7: 48px; --th-space-8: 64px;
  --th-radius-sm: 6px; --th-radius-md: 10px; --th-radius-lg: 16px; --th-radius-xl: 24px;
  --th-ease: cubic-bezier(.6, 0, .2, 1);
  --th-dur-fast: 150ms; --th-dur-base: 250ms; --th-dur-draw: 900ms;
}

.th-display { font-family: var(--th-font-display); font-weight: 800; font-stretch: 125%; letter-spacing: -0.02em; line-height: 0.95; }
.th-metric  { font-family: var(--th-font-data); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }