:root {
  /* type families: an angular display face for titles and labels, a clean sans for reading, a mono for numbers */
  --font-display: 'Chakra Petch', 'Segoe UI', sans-serif;
  --font-ui: Geist, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
  /* the left navigation: wide with labels, a rail of icons on Live and on narrow windows */
  --nav-w: 228px;
  /* surfaces: four clearly stepped levels; the older names below map onto them */
  --surface-0: #070a10;
  --surface-1: #0f141c;
  --surface-2: #161d28;
  --surface-3: #202937;
  --bg-app: var(--surface-0);
  --bg-bar: #0a0e15;
  --bg-panel: var(--surface-1);
  --bg-slot: #121823;
  --bg-raised: var(--surface-2);
  --bg-raised-2: #1b2330;
  --bg-chip: var(--surface-3);
  --bg-open: #131a25;
  --line: #1c2431;
  --line-slot: #232c3a;
  --line-2: #344052;
  --line-3: #46536a;
  --line-soft: #263040;
  --line-hover: #5b6475;
  /* hairlines over any surface, and the light catching a card's top edge */
  --hairline: rgb(170 190 230 / .09);
  --hairline-strong: rgb(170 190 230 / .16);
  --edge-light: inset 0 1px 0 rgb(255 255 255 / .045);
  --text-1: #edf1f7;
  --text-2: #a9b3c4;
  --text-3: #7f8a9e;
  --text-4: #4b5568;
  --amber: oklch(0.83 0.12 82);
  --ally: oklch(0.74 0.11 235);
  --enemy: oklch(0.68 0.15 25);
  --pos: oklch(0.76 0.13 155);
  --neg: oklch(0.70 0.15 15);
  --live: oklch(0.72 0.14 300);
  --on-amber: #1c1404;
  --dmg-physical: oklch(0.72 0.13 55);
  --dmg-magic: oklch(0.64 0.11 205);
  --dmg-true: oklch(0.90 0.015 260);
  --tag-heal: oklch(0.76 0.13 155);
  --tag-tank: oklch(0.80 0.035 250);
  --tag-cc: oklch(0.74 0.12 330);
  --band-1: #ff4e50;
  --band-2: #fcb1b2;
  --band-4: #7ea4f4;
  /* U.GG's #3273fa, a touch lighter so text in it reaches 4.5:1 on the panels */
  --band-5: #3a7bfb;
  --band-6: #ff9b00;
  /* one scale for tier letters, tier rows and how good a win rate is */
  --tier-splus: #f2b84b;
  --tier-s: #e8913a;
  --tier-a: #5fc79a;
  --tier-b: #8fa3bf;
  --tier-c: #b08ab8;
  --tier-d: #e0645c;
  /* a game won or lost (League's blue and red); better or worse stays --pos / --neg */
  --win: oklch(0.70 0.12 245);
  --loss: oklch(0.66 0.15 20);
  /* layout: every page sits in one centered column; the draft screens get a wider one */
  --page-max: 1280px;
  --page-max-app: 1600px;
  --page-pad: clamp(16px, 3vw, 32px);
  --grid-gap: 24px;
  --rail: 320px;
  --section-gap: 32px;
  --card-pad: 16px;
  /* type: seven sizes; 11px caps is the one label style */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-lg: 15px;
  --fs-xl: 20px;
  --fs-2xl: 34px;
  --fs-hero: 60px;
  --cols: 120px minmax(0, 1fr) 120px 384px;
  --gap: 12px;
  --slot-gap: 8px;
  --slot-icon: 64px;
  --tile: 56px;
  --tile-gap: 8px 7px;
  --ban: 32px;
  --sug-icon: 36px;
  --sug-pad: 8px 12px;
  --bar-w: 84px;
  --bd-row: 26px;
  --item: 40px;
  --keystone: 36px;
  --style-icon: 20px;
  --spell: 32px;
  --build-pad: 10px 14px;
  --build-body: 62px;
  --build-group-gap: 22px;
  --item-gap: 7px;
  --dmg-pad: 10px 12px;
  --dmg-gap: 20px;
  --tip-w: 264px;
  --top-h: 52px;
  --panel-pad: 12px 14px 14px;
  /* type scale: 9, 10, 11, 12, 13, 14, 16, 18, 20, 22, 24, 28 px; no half pixels */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 999px;
  --tracking-label: .07em;
  --tracking-title: .09em;
  /* spacing: a 4 px grid with the two half steps the dense board needs */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 16px;
  --space-8: 20px;
  --space-9: 24px;
  --space-10: 32px;
  /* motion: arriving, the lock-in pop, light sweeps */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-snap: cubic-bezier(0, .74, 1, 1);
  --ease-sweep: cubic-bezier(0, 0, .15, .99);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --dur-count: 450ms;
  --dur-lockin: 600ms;
  --stagger: 40ms;
  /* elevation */
  --ring-amber: 0 0 0 1px var(--amber);
  --glow-amber: 0 0 0 1px var(--amber), 0 0 14px color-mix(in oklch, var(--amber) 35%, transparent);
  --shadow-pop: 0 1px 0 rgb(255 255 255 / .04) inset, 0 2px 4px rgb(0 0 0 / .3), 0 16px 36px -8px rgb(0 0 0 / .65);
  --shadow-float: var(--shadow-pop);
}