/* Design tokens: the only file where raw colour, size, radius and width values may be written.
   tests/test_design_tokens.py fails on a raw value anywhere else and on any var(--x) that
   is not defined here. Colours are 6-digit hex or a var() alias (swimTheme in report.js
   depends on that). */
:root {
  /* Federation colours: names and values carried unchanged */
  --brand: #004282;
  --brand-fill: #7dd3f3;
  --brand-tint: #c6ebfb;
  --brand-wash: #e8f4ff;
  --ground: #fefefe;
  --surface: #ffffff;
  --ink: #004282;
  --ink-muted: #546475;
  --ink-inverse: #fefefe;
  --danger: #b8433a;
  --danger-wash: #fbeceb;
  --success: #1f6b4a;
  --success-wash: #e7f3ed;
  --border: #76879a;
  --border-subtle: #d5dde5;
  --focus: #7dd3f3;

  /* App extension: the approved data palette */
  --warning: #8a5300;
  --warning-wash: #fdf1dc;
  --brand-mid: #00629e;
  --data-1: var(--brand);
  --data-2: #b35300;
  --data-3: #0089b8;
  --data-4: #c2327a;
  --data-5: #00806a;
  --data-6: #7a3e9d;
  --data-7: #8a6d00;
  --data-8: var(--ink-muted);
  --data-5-tint: #9fdcc0;

  /* Semantic aliases: no new values */
  --sex-male: var(--data-1);
  --sex-female: var(--data-4);
  --champ-rollo: var(--data-5);
  --champ-rollo-open: var(--data-5-tint);
  --champ-rollo-ikm: var(--data-7);
  --champ-ikm: var(--data-2);
  --champ-ikm-sm: var(--data-6);
  --champ-sm: var(--data-1);
  --champ-other: var(--data-8);
  --champ-none: var(--border-subtle);
  --tier-pre-rollo: var(--brand-tint);
  --tier-rollo: var(--brand-fill);
  --tier-ikm: var(--data-3);
  --tier-nsm: var(--brand-mid);
  --tier-sm: var(--brand);
  --tier-masters: var(--border);
  --tier-harrastajat: var(--data-5-tint);

  /* Type */
  --font-heading: "Changa", system-ui, sans-serif;
  --font-body: "Source Sans 3 Variable", system-ui, sans-serif;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --font-size-micro: 0.6875rem;
  --font-size-caption: 0.75rem;
  --font-size-small: 0.875rem;
  --font-size-body: 1rem;
  --font-size-lead: 1.125rem;
  --font-size-h3: 1.25rem;
  --font-size-h2: 1.5rem;
  --font-size-h1: 2rem;
  --font-size-display: 2.5rem;
  --line-height-heading: 1.1;
  --line-height-body: 1.5;

  /* Shape. Square everywhere; the round tokens are for the few things that are round
     (spinners, the cut planner toggle, step circles, the info icon). */
  --radius: 0;
  --radius-round: 50%;
  --radius-pill: 999px;
  --border-width: 1px;
  --border-width-strong: 2px;
  --rule-width: 6px;
  --focus-width: 3px;
}