/* We Talk Rugby — design tokens v1.0 · Tidewater (Palette A) */
:root {
  color-scheme: light;
  /* Colour roles — light */
  --wtr-bg: #F7F5F0;
  --wtr-surface: #FDFCF9;
  --wtr-section: #EDEAE2;
  --wtr-text: #1F2A2C;
  --wtr-heading: #0F1D20;
  --wtr-meta: #56625F;
  --wtr-border: #DDD8CE;
  --wtr-control: #59909C;
  --wtr-header: #0E4A55;
  --wtr-header-text: #FFFFFF;
  --wtr-header-meta: #9CC6D0;
  --wtr-accent: #F2A33A;
  --wtr-link: #0E6272;
  --wtr-link-hover: #0E4A55;
  --wtr-link-visited: #5A4E7C;
  --wtr-tag-bg: #DFEEF2;
  --wtr-tag-text: #0E4A55;
  --wtr-btn: #0E4A55;
  --wtr-btn-text: #FFFFFF;
  --wtr-btn-hover: #042930;
  --wtr-cta: #F2A33A;
  --wtr-cta-text: #0F1D20;
  --wtr-cta-hover: #F4BD6F;
  --wtr-quote: #0E4A55;
  --wtr-quote-rule: #F2A33A;
  --wtr-indicator: #0E4A55;
  --wtr-focus: #0E6272;
  --wtr-signal: #D93A26;
  --wtr-signal-text: #FFFFFF;
  --wtr-win: #155E8C;
  --wtr-loss: #B4470F;
  --wtr-draw: #5E6668;
  --wtr-on-status: #FFFFFF;
  --wtr-footer-bg: #062127;
  --wtr-footer-text: #E3E9E7;
  --wtr-footer-meta: #9CC6D0;
  --wtr-ad-bg: #EFEEEA;
  --wtr-ad-border: #C9C5BC;
  --wtr-logo-tile: #FDFCF9;
  --wtr-logo-ring: #DDD8CE;
  --wtr-photo-bg: #DFEEF2;
  --wtr-silhouette: #9CC6D0;
  --wtr-skeleton: #EDEAE2;
  --wtr-scrim: rgba(6,33,39,.64);
  --wtr-shadow-1: 0 1px 2px rgba(6,33,39,.06),0 1px 1px rgba(6,33,39,.04);
  --wtr-shadow-2: 0 10px 28px -10px rgba(6,33,39,.24);
  --wtr-shadow-3: 0 28px 72px -18px rgba(6,33,39,.42);
  /* Status aliases */
  --wtr-up: var(--wtr-win);
  --wtr-down: var(--wtr-loss);
  --wtr-live: var(--wtr-signal);
  --wtr-breaking: var(--wtr-signal);
  --wtr-ht-bg: var(--wtr-cta);
  --wtr-ht-text: var(--wtr-cta-text);
  /* Brand scales (fixed) */
  --wtr-petrol-50: #F1F8FA;
  --wtr-petrol-100: #DFEEF2;
  --wtr-petrol-200: #C2DDE3;
  --wtr-petrol-300: #9CC6D0;
  --wtr-petrol-400: #75ACB8;
  --wtr-petrol-500: #59909C;
  --wtr-petrol-600: #3F7581;
  --wtr-petrol-700: #275B65;
  --wtr-petrol-800: #0E4A55;
  --wtr-petrol-900: #042930;
  --wtr-amber-50: #FFF5EA;
  --wtr-amber-100: #FEE7CF;
  --wtr-amber-200: #F8D0A3;
  --wtr-amber-300: #F4BD6F;
  --wtr-amber-400: #F2A33A;
  --wtr-amber-500: #B97506;
  --wtr-amber-600: #955E03;
  --wtr-amber-700: #734805;
  --wtr-amber-800: #533201;
  --wtr-amber-900: #361E00;
  /* Type */
  --wtr-font-sans: 'Hanken Grotesk', system-ui, sans-serif;
  --wtr-font-serif: 'Source Serif 4', Georgia, serif;
  --wtr-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --wtr-fs-display: clamp(2rem, 1.4429rem + 2.286vw, 3.5rem);
  --wtr-lh-display: 1.02;
  --wtr-fs-h1: clamp(1.875rem, 1.5036rem + 1.524vw, 2.875rem);
  --wtr-lh-h1: 1.06;
  --wtr-fs-h2: clamp(1.5rem, 1.3607rem + 0.571vw, 1.875rem);
  --wtr-lh-h2: 1.16;
  --wtr-fs-h3: clamp(1.25rem, 1.2036rem + 0.190vw, 1.375rem);
  --wtr-lh-h3: 1.22;
  --wtr-fs-h4: clamp(1.0625rem, 1.0393rem + 0.095vw, 1.125rem);
  --wtr-lh-h4: 1.28;
  --wtr-fs-standfirst: clamp(1.25rem, 1.1804rem + 0.286vw, 1.4375rem);
  --wtr-lh-standfirst: 1.42;
  --wtr-fs-body: clamp(1.1875rem, 1.1411rem + 0.190vw, 1.3125rem);
  --wtr-lh-body: 1.65;
  --wtr-fs-body-s: clamp(1.0625rem, 1.0393rem + 0.095vw, 1.125rem);
  --wtr-lh-body-s: 1.55;
  --wtr-fs-ui: 0.9375rem;
  --wtr-lh-ui: 1.3;
  --wtr-fs-ui-s: 0.875rem;
  --wtr-lh-ui-s: 1.4;
  --wtr-fs-caption: 0.8125rem;
  --wtr-lh-caption: 1.45;
  --wtr-fs-overline: 0.75rem;
  --wtr-lh-overline: 1.2;
  --wtr-fs-score-xl: clamp(2.5rem, 1.9429rem + 2.286vw, 4rem);
  --wtr-lh-score-xl: 1;
  --wtr-fs-score: clamp(1.125rem, 1.0786rem + 0.190vw, 1.25rem);
  --wtr-lh-score: 1;
  --wtr-fs-data: 0.875rem;
  --wtr-lh-data: 1.4;
  --wtr-fs-time: 0.8125rem;
  --wtr-lh-time: 1.3;
  --wtr-lh-body-m: 1.65;
  --wtr-measure: 680px;
  /* Space */
  --wtr-space-0: 2px;
  --wtr-space-1: 4px;
  --wtr-space-2: 8px;
  --wtr-space-3: 12px;
  --wtr-space-4: 16px;
  --wtr-space-5: 20px;
  --wtr-space-6: 24px;
  --wtr-space-7: 32px;
  --wtr-space-8: 40px;
  --wtr-space-9: 48px;
  --wtr-space-10: 64px;
  --wtr-space-11: 80px;
  --wtr-space-12: 96px;
  /* Radius */
  --wtr-radius-xs: 3px;
  --wtr-radius-img: 4px;
  --wtr-radius-sm: 6px;
  --wtr-radius-md: 10px;
  --wtr-radius-lg: 16px;
  --wtr-radius-pill: 999px;
  /* Layout */
  --wtr-container: 1280px;
  --wtr-margin: 16px;
  --wtr-gutter: 12px;
  --wtr-sidebar: 336px;
  --wtr-header-h: 56px;
  /* Motion */
  --wtr-ease: cubic-bezier(.2,.7,.2,1);
  --wtr-dur-1: 120ms;
  --wtr-dur-2: 200ms;
  --wtr-dur-3: 280ms;
  /* Logo tiles */
  --wtr-logo-16: 16px; --wtr-logo-16-pad: 2px; --wtr-logo-16-r: 3px;
  --wtr-logo-24: 24px; --wtr-logo-24-pad: 3px; --wtr-logo-24-r: 4px;
  --wtr-logo-32: 32px; --wtr-logo-32-pad: 4px; --wtr-logo-32-r: 6px;
  --wtr-logo-48: 48px; --wtr-logo-48-pad: 6px; --wtr-logo-48-r: 8px;
  --wtr-logo-96: 96px; --wtr-logo-96-pad: 12px; --wtr-logo-96-r: 16px;
}
@media (min-width: 600px)  { :root { --wtr-margin: 32px; --wtr-gutter: 20px; } }
@media (min-width: 1024px) { :root { --wtr-gutter: 24px; --wtr-header-h: 112px; } }
@media (min-width: 1280px) { :root { --wtr-margin: max(80px, calc((100vw - 1280px) / 2)); } }

/* Dark — device setting, unless the reader chose Light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --wtr-bg: #0F181A;
    --wtr-surface: #162124;
    --wtr-section: #131E21;
    --wtr-text: #D6DCD9;
    --wtr-heading: #F1F3EF;
    --wtr-meta: #97A5A2;
    --wtr-border: #29383C;
    --wtr-control: #59909C;
    --wtr-header: #0B3038;
    --wtr-header-text: #F1F3EF;
    --wtr-header-meta: #9CC6D0;
    --wtr-accent: #F2A33A;
    --wtr-link: #6FC3CF;
    --wtr-link-hover: #A8DCE3;
    --wtr-link-visited: #B7ADDB;
    --wtr-tag-bg: #173338;
    --wtr-tag-text: #9CD3DC;
    --wtr-btn: #6FC3CF;
    --wtr-btn-text: #0F181A;
    --wtr-btn-hover: #A8DCE3;
    --wtr-cta: #F2A33A;
    --wtr-cta-text: #0F181A;
    --wtr-cta-hover: #F4BD6F;
    --wtr-quote: #BFE3E8;
    --wtr-quote-rule: #F2A33A;
    --wtr-indicator: #F2A33A;
    --wtr-focus: #6FC3CF;
    --wtr-signal: #D93A26;
    --wtr-signal-text: #FFFFFF;
    --wtr-win: #7DB8E8;
    --wtr-loss: #F29A62;
    --wtr-draw: #A3ACAE;
    --wtr-on-status: #0F181A;
    --wtr-footer-bg: #0A1113;
    --wtr-footer-text: #D6DCD9;
    --wtr-footer-meta: #8FA09D;
    --wtr-ad-bg: #151C1E;
    --wtr-ad-border: #33403F;
    --wtr-logo-tile: #E3E9E7;
    --wtr-logo-ring: #E3E9E7;
    --wtr-photo-bg: #173338;
    --wtr-silhouette: #275B65;
    --wtr-skeleton: #29383C;
    --wtr-scrim: rgba(10,17,19,.8);
    --wtr-shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --wtr-shadow-2: 0 10px 28px -10px rgba(0,0,0,.7);
    --wtr-shadow-3: 0 28px 72px -18px rgba(0,0,0,.8);
  }
}
/* Dark — reader chose Dark */
:root[data-theme="dark"] {
  color-scheme: dark;
  --wtr-bg: #0F181A;
  --wtr-surface: #162124;
  --wtr-section: #131E21;
  --wtr-text: #D6DCD9;
  --wtr-heading: #F1F3EF;
  --wtr-meta: #97A5A2;
  --wtr-border: #29383C;
  --wtr-control: #59909C;
  --wtr-header: #0B3038;
  --wtr-header-text: #F1F3EF;
  --wtr-header-meta: #9CC6D0;
  --wtr-accent: #F2A33A;
  --wtr-link: #6FC3CF;
  --wtr-link-hover: #A8DCE3;
  --wtr-link-visited: #B7ADDB;
  --wtr-tag-bg: #173338;
  --wtr-tag-text: #9CD3DC;
  --wtr-btn: #6FC3CF;
  --wtr-btn-text: #0F181A;
  --wtr-btn-hover: #A8DCE3;
  --wtr-cta: #F2A33A;
  --wtr-cta-text: #0F181A;
  --wtr-cta-hover: #F4BD6F;
  --wtr-quote: #BFE3E8;
  --wtr-quote-rule: #F2A33A;
  --wtr-indicator: #F2A33A;
  --wtr-focus: #6FC3CF;
  --wtr-signal: #D93A26;
  --wtr-signal-text: #FFFFFF;
  --wtr-win: #7DB8E8;
  --wtr-loss: #F29A62;
  --wtr-draw: #A3ACAE;
  --wtr-on-status: #0F181A;
  --wtr-footer-bg: #0A1113;
  --wtr-footer-text: #D6DCD9;
  --wtr-footer-meta: #8FA09D;
  --wtr-ad-bg: #151C1E;
  --wtr-ad-border: #33403F;
  --wtr-logo-tile: #E3E9E7;
  --wtr-logo-ring: #E3E9E7;
  --wtr-photo-bg: #173338;
  --wtr-silhouette: #275B65;
  --wtr-skeleton: #29383C;
  --wtr-scrim: rgba(10,17,19,.8);
  --wtr-shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --wtr-shadow-2: 0 10px 28px -10px rgba(0,0,0,.7);
  --wtr-shadow-3: 0 28px 72px -18px rgba(0,0,0,.8);
}

@media (prefers-reduced-motion: reduce) {
  :root { --wtr-dur-1: 0ms; --wtr-dur-2: 0ms; --wtr-dur-3: 0ms; }
}
:focus-visible { outline: 2px solid var(--wtr-focus); outline-offset: 2px; }
.wtr-on-brand :focus-visible { outline-color: var(--wtr-accent); }