/* Twitch brand tokens, from unfairly.ai/brand-guidelines/twitch (checked 2026-10-31).
   Sizes, spacing and components were measured on https://www.twitch.tv/p/en/about/ (computed styles and bounding boxes with Playwright at 1440x900 and 390x844 after scrolling the page once, plus the full-page screenshots, 2026-10-31).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name Twitch's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #FFFFFF;
  --color-surface: #F0F0FF;
  --color-ink: #000000;
  --color-ink-muted: #868695;
  --color-accent: #9146FF;
  --color-on-accent: #FFFFFF;
  --color-accent-secondary: #000000;
  --color-night: #000000;
  --color-on-night: #F0F0FF;
  --color-twitch-purple: #9146FF;
  --color-black: #000000;
  --color-ice: #F0F0FF;
  --color-white: #FFFFFF;
  --color-caption-gray: #868695;
  --color-jiggle: #FAB4FF;
  --color-worm: #FACDCD;
  --color-isabelle: #FEEE85;
  --color-droid: #BEFAE1;
  --color-wipe-out: #00C8AF;
  --color-smoke: #D2D2E6;
  --color-widow: #BEAAFF;
  --color-peach: #FC6675;
  --color-pac: #FFCA5F;
  --color-mudkip: #57BEE6;
  --color-sonic: #0014A5;
  --color-dragon: #8205B4;
  --color-cuddle: #FA1ED2;
  --color-bandit: #FF6905;
  --color-lightning: #FAFA19;
  --color-k-o: #BEFF00;
  --color-mega: #00FAFA;
  --color-nights: #41145F;
  --color-osu: #BE0078;
  --color-red-alert: #FA2828;
  --color-egg: #00FA05;
  --color-legend: #69FFC3;
  --color-zero: #1E69FF;
  --color-text-cta-on-purple-text: #000000;
  --color-text-cta-on-light-text: #9146FF;
  --color-text-cta-on-dark-text: #9146FF;
  --color-category-row-text: #FFFFFF;
  --color-figure-caption-text: #868695;
  --color-lead-panel-fill: #FFFFFF;
  --color-lead-panel-text: #000000;
  --font-display: Figtree, Figtree, "Helvetica Neue", Arial, sans-serif;
  --font-display-original: Roobert, Figtree, Figtree, "Helvetica Neue", Arial, sans-serif;
  --font-body: Figtree, Figtree, "Helvetica Neue", Arial, sans-serif;
  --font-body-original: Roobert, Figtree, Figtree, "Helvetica Neue", Arial, sans-serif;
  --page-margin: 120px;
  --section-padding: 84px;
  --container-max: 1200px;
  --hero-text-max: 1320px;
  --nav-height: 204px;
  --grid-gutter: 0px;
  --grid-columns: 12;
  --text-display-xl-size: 192px;
  --text-display-xl-line: 0.92;
  --text-display-xl-weight: 500;
  --text-display-xl-tracking: -7.68px;
  --text-list-xl-size: 96px;
  --text-list-xl-line: 1;
  --text-list-xl-weight: 600;
  --text-list-xl-tracking: -3.84px;
  --text-lead-size: 48px;
  --text-lead-line: 1;
  --text-lead-weight: 600;
  --text-lead-tracking: -2.2px;
  --text-footer-link-size: 24px;
  --text-footer-link-line: 1.5;
  --text-footer-link-weight: 600;
  --text-nav-size: 18px;
  --text-nav-line: 1.16;
  --text-nav-weight: 600;
  --text-footer-head-size: 14px;
  --text-footer-head-line: 1.42;
  --text-footer-head-weight: 600;
  --text-caption-size: 14px;
  --text-caption-line: 1;
  --text-caption-weight: 600;
  --text-legal-size: 12px;
  --text-legal-line: 1.42;
  --text-legal-weight: 600;
  --radius-text-cta-on-purple: 0px;
  --radius-text-cta-on-light: 0px;
  --radius-text-cta-on-dark: 0px;
  --radius-lead-panel: 0px;
  --duration-text-jump: 450ms;
  --ease-label-rise: cubic-bezier(0.87, 0, 0.04, 1);
  --duration-label-rise: 300ms;
  --ease-cta-color: ease-in-out;
  --duration-cta-color: 150ms;
  --ease-underline-grow: ease-in-out;
  --duration-underline-grow: 300ms;
  --ease-arrow-swap: ease-in;
  --duration-arrow-swap: 200ms;
  --icon-cta-arrow: 24px;
}
/* Phone values measured at 390px; Twitch's CSS switches at 750px. */
@media (max-width: 750px) {
  :root {
    --page-margin: 33px;
    --section-padding: 33px;
    --text-display-xl-size: 58.5px;
    --text-list-xl-size: 37px;
    --text-lead-size: 19.5px;
    --text-footer-link-size: 16.7px;
    --text-footer-head-size: 12.4px;
    --text-caption-size: 8px;
  }
}