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

/*
 * The whole palette, in one place.
 *
 * Six base colours (`primary`, `accent`, `ink`, `mist`, `white`, 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).
 *
 * ParlayBae look: `ink` is the near-black page, `mist` the light text on it, `primary` the pink and `accent`
 * the gold that together make the gradient (`grad`, the signature: call-to-action buttons, highlighted words and
 * numbers). The reference's palette is the ParlayBae preview brief's placeholder set (no brand colours were found).
 *
 * Derived with `color-mix()`, so a recolour reaches them too: `ink-2` and `card` (the two lifted surfaces), `deep`
 * (the footer and the darkest bands) and `primary-deep` (the arrow on a light button). The reference's own values
 * are #1C1C22, #23232B, #0E0E12 and #C23468; the mixes land within 5 levels of each channel (checked in
 * `styles.test.ts`). `soft`, `line` and `shadow` are `mist`, `white` and black at a fixed alpha.
 *
 * `--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 (Outfit), `body` running text (DM Sans), `text` follows
     the body, `mono` the numerals (structural, not a face the Fonts panel swaps). */
  --t2-font-display: Outfit, 'Arial Rounded MT Bold', 'Segoe UI', system-ui, sans-serif;
  --t2-font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --t2-font-text: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --t2-font-mono: var(--t2-font-display);

  --t2-ink: #141418;
  --t2-ink-rgb: 20, 20, 24;
  --t2-mist: #F7F3F5;
  --t2-mist-rgb: 247, 243, 245;
  --t2-white: #FFFFFF;
  --t2-white-rgb: 255, 255, 255;
  --t2-primary: var(--brand-primary, #E8457A);
  --t2-primary-rgb: 232, 69, 122;
  --t2-accent: #F5C451;
  --t2-accent-rgb: 245, 196, 81;
  --t2-shade-rgb: 0, 0, 0;

  --t2-ink-2: color-mix(in srgb, var(--t2-ink), white 4%);
  --t2-card: color-mix(in srgb, var(--t2-ink), white 7%);
  --t2-deep: color-mix(in srgb, var(--t2-ink), black 28%);
  --t2-primary-deep: color-mix(in srgb, var(--t2-primary), black 17%);
  --t2-grad: linear-gradient(120deg, var(--t2-primary) 0%, var(--t2-accent) 100%);

  --t2-line: rgba(var(--t2-white-rgb), 0.1);
  --t2-soft: rgba(var(--t2-mist-rgb), 0.74);
  --t2-shadow: 0 18px 40px -18px rgba(var(--t2-shade-rgb), 0.7);
  --t2-radius: 12px;
  --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-ink); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--t2-ink); color: var(--t2-mist); font-family: var(--t2-font-body); font-size: 17px; line-height: 1.6; 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 { margin: 0; }
[hidden] { display: none !important; }
::selection { background: var(--t2-primary); color: var(--t2-white); }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#top, #picks, #offers, #game, #about, #responsible { scroll-margin-top: calc(var(--t2-head) + 4px); }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 2000; background: var(--t2-mist); color: var(--t2-ink); padding: 10px 16px; border-radius: 6px; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--t2-accent); outline-offset: 3px; }