/* Design tokens: the only place colours, sizes and fonts are defined. Everything else uses these variables. */
:root {
  color-scheme: light;

  /* Brand */
  --brand: #038706;          /* fills: header, primary buttons, active states (white text on it is 4.7:1) */
  --brand-strong: #026b05;   /* green TEXT and links on light backgrounds (6:1 on --bg) */
  --brand-deep: #025a04;     /* hover/pressed for brand fills */
  --brand-tint: #e5f3e5;     /* small highlights only (active tab pill, success flash) */
  --on-brand: #ffffff;
  --accent: #f5c400;         /* used sparingly: league leader, trophy */
  --on-accent: #1a1d21;

  /* Neutrals */
  --bg: #f2f3f5;
  --surface: #ffffff;
  --surface-2: #f7f8f9;      /* table headers, inset areas */
  --ink: #1a1d21;
  --ink-2: #3d434a;          /* secondary text that must stay strong */
  --muted: #5a6169;          /* 5.7:1 on --bg, 6.3:1 on --surface */
  --line: #dcdfe3;
  --line-soft: #e9ebee;
  --control-border: #8a929b;

  /* Status */
  --danger: #b42318;
  --danger-tint: #fdecea;
  --danger-line: #f3b8b2;
  --ok-tint: #e5f3e5;
  --ok-line: #a8d5a9;
  --warn: #8a5a00;

  /* Type: a traditional sans-serif stack, no web fonts to download */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-2xl: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
  --lh: 1.5;

  /* Space, shape, depth */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-pill: 999px;
  --shadow: 0 1px 2px rgba(16, 24, 32, 0.06), 0 1px 3px rgba(16, 24, 32, 0.08);
  --shadow-lg: 0 8px 24px rgba(16, 24, 32, 0.16);

  /* Layout */
  --tap: 44px;               /* minimum touch target */
  --wrap: 72rem;             /* max content width */
  --gutter: 1rem;
  --tabbar-h: 64px;
}

@media (min-width: 48rem) {
  :root { --gutter: 1.5rem; }
}