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

/*
 * The whole palette, in one place.
 *
 * Five base colours (`primary`, `ink`, `silver`, `mist`, `white`), 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).
 *
 * Vegas Refund look: `ink` is the deep green-black (text, footer, featured card,
 * hero veil), `primary` the one green (calls to action, the featured badge and
 * single emphasised words), `silver` the pale green tint (labels on dark), `mist`
 * the light surface (alternate bands) and `white` the page.
 *
 * Derived with `color-mix()`, so a recolour reaches them too: `primary-deep` (the
 * green used as text on a light page, button hover and the follow banner), a lighter
 * primary for hover text on dark (`accent-light`) and a lighter ink (`ink-2`).
 * `accent` is the reference's own gold slot, parked on the green at the owner's
 * request ("for now"): it is an alias of `primary`, so bringing gold back means
 * pointing three tokens elsewhere, not hunting rules. `soft`, `line` and `shadow`
 * are `ink` 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` big titles (Anton, single weight), `body` buttons/labels/cards,
     `text` running text, `mono` the numerals (structural, not a face the Fonts panel swaps). */
  --t2-font-display: Anton, Impact, 'Arial Narrow', sans-serif;
  --t2-font-body: 'Barlow Semi Condensed', 'Arial Narrow', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --t2-font-text: 'Barlow Semi Condensed', 'Arial Narrow', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --t2-font-mono: var(--t2-font-body);

  --t2-ink: #0F1A14;
  --t2-ink-rgb: 15, 26, 20;
  --t2-silver: #B9D8C6;
  --t2-silver-rgb: 185, 216, 198;
  --t2-mist: #F4F7F5;
  --t2-mist-rgb: 244, 247, 245;
  --t2-white: #FFFFFF;
  --t2-white-rgb: 255, 255, 255;
  --t2-primary: var(--brand-primary, #1FA35C);
  --t2-primary-rgb: 31, 163, 92;

  --t2-primary-deep: color-mix(in srgb, var(--t2-primary), black 26%);
  --t2-accent: var(--t2-primary);
  --t2-accent-rgb: var(--t2-primary-rgb);
  --t2-accent-hover: var(--t2-primary-deep);
  --t2-accent-light: color-mix(in srgb, var(--t2-primary), white 25%);
  --t2-ink-2: color-mix(in srgb, var(--t2-ink), white 6%);

  --t2-line: rgba(var(--t2-ink-rgb), 0.1);
  --t2-soft: rgba(var(--t2-ink-rgb), 0.72);
  --t2-shadow: 0 14px 34px -16px rgba(var(--t2-ink-rgb), 0.28);
  --t2-radius: 12px;
  --t2-head: 76px;
  --t2-notice-h: 0px;
  --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; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--t2-white); color: var(--t2-ink); font-family: var(--t2-font-body); font-size: 17.5px; line-height: 1.55; 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-ink); 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, #responsible { scroll-margin-top: calc(var(--t2-head) + 4px); }

.skip-link { position: absolute; left: -999px; top: 8px; z-index: 2000; background: var(--t2-ink); color: var(--t2-white); padding: 10px 16px; border-radius: 6px; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--t2-ink); outline-offset: 3px; }

/* Set in the studio's Colours and Fonts panels — overrides the defaults above. */
:root {
  --t2-primary: #E3B341;
  --t2-primary-rgb: 227, 179, 65;
  --t2-silver: #ffd470;
  --t2-silver-rgb: 255, 212, 112;
}