/* Shared across every page: the palette and type tokens, and the reset. */

/*
 * The whole palette, in one place.
 *
 * Four base colours (`ink`, `bg`, `white`, `primary`, plus the black `shade` used only for shadows), each declared
 * twice: once as a hex value for `color`/`background`/gradient stops, once as a bare "R, G, B" triple so
 * `rgba(var(--t2-ink-rgb), 0.5)` can still tint it with alpha (the same reason template 01's own `base.css` gives).
 *
 * Big Tone look: `ink` is the navy of the hero, the dark bands and the text, `bg` the pale page, `primary` the mint
 * of the buttons, the outline of the curve and the accents. The reference calls these `--navy`, `--bg` and `--mint`;
 * `primary` is the name every template's palette role maps onto. The three colours are the brief's own proposal for
 * the account (`#13233A`, `#F4F6F8`, `#2E9E6B`).
 *
 * Derived, so a recolour reaches them too:
 *  - with `color-mix()`: `deep` (the darkest navy), `primary-2` (the button hover and shadow) and `pale` (the pale
 *    zones, white tinted with the primary), plus the fixed-alpha `soft`, `line` and `shadow`;
 *  - with relative colour syntax (`hsl(from var(--t2-ink) h s l)`): `ink-2` (the lifted navy) and `photo` (the flat tint
 *    under the doodle), and for the primary `primary-hi` (accent text on the dark bands, never below 58% lightness) and
 *    `primary-deep` (accent text on the pale page, never above 32%), so a dark or a pale primary still reads on both.
 *
 * The reference's values are #1E3556, #2B3E57, #0C1726, #278A5C, #62CF9C, #1F7A52 and #E0EEE7; the derived tokens land
 * within 8 levels of each channel for the reference's own colours (checked in `styles.test.ts`).
 *
 * `--t2-primary`'s default falls back through `--brand-primary` (the composer sets it once on an ancestor of
 * every section; custom properties inherit through a shadow boundary, ordinary rules do not; an explicit
 * per-source override still wins). `--t2-primary-rgb` has no such fallback: there is no CSS-only way to derive
 * an R,G,B triple from an arbitrary value.
 */
:root {
  /* Typography: `display` titles, buttons and numbers (Barlow Condensed), `body` running text (Inter), `text` follows
     the body, `mono` the play cards' type (JetBrains Mono: structural, not a face the Fonts panel swaps). */
  --t2-font-display: 'Barlow Condensed', 'Arial Narrow', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --t2-font-body: Inter, 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --t2-font-text: Inter, 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --t2-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --t2-ink: #13233A;
  --t2-ink-rgb: 19, 35, 58;
  --t2-bg: #F4F6F8;
  --t2-bg-rgb: 244, 246, 248;
  --t2-white: #FFFFFF;
  --t2-white-rgb: 255, 255, 255;
  --t2-primary: var(--brand-primary, #2E9E6B);
  --t2-primary-rgb: 46, 158, 107;
  --t2-shade-rgb: 0, 0, 0;

  --t2-ink-2: hsl(from var(--t2-ink) h calc(s - 2) calc(l + 8));
  --t2-photo: hsl(from var(--t2-ink) h calc(s - 15) calc(l + 10));
  --t2-deep: color-mix(in srgb, var(--t2-ink), black 35%);
  --t2-primary-2: color-mix(in srgb, var(--t2-primary), black 13%);
  --t2-primary-hi: hsl(from var(--t2-primary) h s max(calc(l + 20), 58));
  --t2-primary-deep: hsl(from var(--t2-primary) h calc(s + 5) min(calc(l - 10), 32));
  --t2-pale: color-mix(in srgb, var(--t2-white), var(--t2-primary) 15%);
  --t2-turf: linear-gradient(135deg, var(--t2-primary-hi) 0%, var(--t2-primary) 100%);
  --t2-doodle: url('../assets/template-09/sports-doodle.svg');

  --t2-soft: rgba(var(--t2-ink-rgb), 0.8);
  --t2-line: rgba(var(--t2-ink-rgb), 0.14);
  --t2-em: var(--t2-primary-deep);
  --t2-shadow: 0 16px 34px -20px rgba(var(--t2-ink-rgb), 0.5);
  --t2-cut: clamp(56px, 9vw, 150px); /* height of the diagonal edges of a pale zone */
  --t2-curve: clamp(170px, 22vw, 320px); /* height of the curve box at the bottom of the landing */
  --t2-gap: max(24px, calc(clamp(80px, 15svh, 160px) - 30px)); /* white space under the landing's lowest point, where the first zone shows */
  --t2-radius: 14px;
  --t2-head: 76px;
  --t2-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t2-t-fast: 280ms;
  --t2-t-slow: 480ms;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--t2-bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--t2-bg); color: var(--t2-ink); font-family: var(--t2-font-body); font-size: 17px; line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
h1, h2, h3, h4 { overflow-wrap: break-word; }
[hidden] { display: none !important; }
::selection { background: var(--t2-primary); color: var(--t2-ink); }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#top, #offers, #plays, #who, #game, #latest, #responsible, .tabs { scroll-margin-top: calc(var(--t2-head) + 4px); }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 2000; background: var(--t2-bg); color: var(--t2-ink); padding: 10px 16px; border-radius: 6px; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--t2-primary-2); outline-offset: 3px; }