/* 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.
 *
 * "Jay Cuda" look: `ink` is the ballpark black of the landing, the panels, the footer and the text; `bg` the off-white
 * paper of the page; `primary` the silver of the buttons, the diamonds and the accents. The reference calls them `--ink`,
 * `--bg` and `--sv`; `primary` is the name every template's palette role maps onto.
 *
 * Derived, so a recolour reaches them too:
 *  - with `color-mix()`: `ink-2` (the light end of the black gradient), `ink-mid` (its middle), `deep` (the darkest
 *    black) and `paper-2` (the page, tinted with the primary), plus the fixed-alpha `soft`, `line` and `shadow`;
 *  - with relative colour syntax (`hsl(from var(--t2-primary) h s l)`): `primary-lite` and `primary-2` (the two ends of
 *    the silver gradient), `primary-hi` (accent text on the black surfaces, never below 72% lightness) and
 *    `primary-deep` (accent text on the paper, between 26% and 36% lightness);
 *  - the two gradients the panels and buttons are filled with (`g-ink`, `g-primary`), built from the shades above.
 *
 * The reference's values are #27251F, #F4F5F5, #C4CED4, #E1E7EA, #8E9AA2, #D9E0E4, #4A5459, #3A3732, #1F1D19, #121110 and
 * #E3E7E9; 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, so
 * every tint of the primary uses `color-mix()` on `--t2-primary` and never the triple.
 *
 * `--sq` is the one corner radius of the site, `--cut` the height of the slanted edge under the landing and over the
 * footer, `--dmd` the diamond clip, `--stripe` the pinstripes and `--grain` the black grit; all of these are layout or
 * texture, not palette, so they have no `--t2-` prefix.
 */
:root {
  /* Typography: `display` titles, buttons and numbers (Big Shoulders Display, set in caps by the stylesheet), `body` running
     text (Inter), `text` follows the body, `mono` the small captions (JetBrains Mono: structural, not a face the Fonts panel swaps). */
  --t2-font-display: 'Big Shoulders Display', 'Arial Narrow', Impact, 'Segoe UI', system-ui, 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: #27251F;
  --t2-ink-rgb: 39, 37, 31;
  --t2-bg: #F4F5F5;
  --t2-bg-rgb: 244, 245, 245;
  --t2-white: #FFFFFF;
  --t2-white-rgb: 255, 255, 255;
  --t2-primary: var(--brand-primary, #C4CED4);
  --t2-primary-rgb: 196, 206, 212;
  --t2-shade-rgb: 18, 17, 16;

  --t2-ink-2: color-mix(in srgb, var(--t2-ink), var(--t2-white) 8.5%);
  --t2-ink-mid: color-mix(in srgb, var(--t2-ink), black 20.5%);
  --t2-deep: color-mix(in srgb, var(--t2-ink), black 52%);
  --t2-paper-2: color-mix(in srgb, var(--t2-bg), var(--t2-primary) 35%);
  --t2-primary-lite: hsl(from var(--t2-primary) calc(h - 2.5) calc(s + 2) calc(l + 10));
  --t2-primary-2: hsl(from var(--t2-primary) calc(h + 1.5) calc(s - 6) calc(l - 20.4));
  --t2-primary-hi: hsl(from var(--t2-primary) calc(h - 0.7) calc(s + 1.2) max(calc(l + 7.3), 72));
  --t2-primary-deep: hsl(from var(--t2-primary) calc(h - 2.5) calc(s - 6.5) clamp(26, calc(l - 48), 36));
  --t2-g-ink: linear-gradient(145deg, var(--t2-ink-2) 0%, var(--t2-ink-mid) 55%, var(--t2-ink) 100%);
  --t2-g-primary: linear-gradient(145deg, var(--t2-primary-lite) 0%, var(--t2-primary) 55%, var(--t2-primary-2) 100%);

  --grain: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22%3E%3Cfilter id=%22n%22 x=%220%22 y=%220%22 width=%22100%25%22 height=%22100%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 -0.52%22/%3E%3C/filter%3E%3Crect width=%22260%22 height=%22260%22 filter=%22url(%23n)%22/%3E%3C/svg%3E");
  --stripe: repeating-linear-gradient(90deg, rgba(var(--t2-white-rgb), 0.055) 0, rgba(var(--t2-white-rgb), 0.055) 1px, transparent 1px, transparent 22px);
  --surface: var(--stripe), var(--grain), var(--t2-g-ink);
  --dmd: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

  --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 18px 38px -22px rgba(var(--t2-ink-rgb), 0.55);
  --t2-radius: 6px;
  --sq: 6px;
  --cut: 34px;
  --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, #fancies, #formats, #game, #offers, #who, #community, #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: var(--sq); }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--t2-primary-2); outline-offset: 3px; }