/*
  Design tokens.

  Every colour pairing used for text or controls has been measured against
  WCAG 2.2 AA.

  Neutral greys with one accent: cobalt blue (#2B4BFF) on light surfaces,
  a lighter blue (#93A6FF) on dark sections, and #8197FF in the dark theme.
  The cursor, click stamps, highlights, grid ink and buttons all use the
  same blue: white text on the full blue, dark text on the lighter blues.
*/

@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Headings (h1 and h2). Anybody, trimmed to widths 100-150%, weights 100-800 and
   Latin characters; see THIRD-PARTY-LICENSES.txt */
@font-face {
  font-family: "Anybody";
  src: url("../fonts/anybody-variable.woff") format("woff");
  font-weight: 100 800;
  font-stretch: 100% 150%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette */
  --color-ink: #111216;
  --color-ink-raised: #1C1D22;
  --color-paper: #F3F4F6;
  --color-paper-low: #E7E9EE;
  --color-haze: #D9DCE3;
  --color-stone: #A3A7B1;
  --color-stone-deep: #535763;
  --color-blue: #2B4BFF;
  --color-blue-press: #1F3AD6;
  --color-blue-deep: #16267F;
  --color-blue-light: #93A6FF;
  --color-blue-tint: rgb(43 75 255 / 0.12);

  /* Roles: light surfaces are the default */
  --surface: var(--color-paper);
  --surface-raised: var(--color-paper-low);
  --text: var(--color-ink);
  --text-muted: var(--color-stone-deep);
  --accent: var(--color-blue);
  --accent-press: var(--color-blue-press);
  --on-accent: #FFFFFF;
  --focus: var(--color-blue);

  /* Type */
  --font-sans: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Anybody", "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --stretch-display: 112%;

  --weight-thin: 200;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;

  --step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.95rem);
  --step-0: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.35rem + 1.1vw, 2.25rem);
  --step-3: clamp(2.4rem, 1.7rem + 3.2vw, 4.75rem);
  --step-4: clamp(2.75rem, 1.5rem + 5.4vw, 6.75rem);

  --leading-display: 1.02;
  --leading-heading: 1.1;
  --leading-body: 1.65;
  --tracking-display: -0.03em;
  --tracking-label: 0.08em;
  --measure: 60ch;

  /* Space */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: clamp(3rem, 2rem + 5vw, 6.5rem);
  --space-2xl: clamp(5rem, 3rem + 9vw, 11rem);
  /* One rhythm between sections: the same space above and below every
     section, light or dark, so the gaps down the page all match */
  --section-space: clamp(2.5rem, 1.5rem + 3vw, 4rem);

  --gutter: clamp(1.25rem, 0.6rem + 3vw, 3rem);
  --container: 78rem;

  /* Shape: one set of corners for the whole site.
     l (2rem): every card or panel that sits on the page (reel, photo, stats,
       values, notes, banner, plan game, policies, message card).
     m (1.25rem): panels and tiles inside one of those.
     s (0.75rem): small pieces (step cards, buttons in the reel, slots).
     pill: every button, tag and the menu. */
  --radius-s: 0.75rem;
  --radius-m: 1.25rem;
  --radius-l: 2rem;
  --radius-l-hover: 3rem;
  --radius-pill: 999px;

  /* Glass */
  --glass: rgb(243 244 246 / 0.7);

  /* Squared-paper lines (hero canvas and the plan section) */
  --grid-line: rgb(17 18 22 / 0.09);
  --grid-ink: rgb(43 75 255 / 0.9);
  --grid-stamp: rgb(43 75 255 / 0.55);
  --glass-blur: blur(18px) saturate(1.4);
  --glass-shadow: 0 10px 40px rgb(17 18 22 / 0.12);

  /* Fixed bars, used for scroll padding so focus is never hidden behind them */
  --header-height: 4.75rem;
  --dock-height: 4rem;
  --dock-offset: 1.25rem;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-s: 200ms;
  --duration-m: 500ms;
  --duration-l: 1000ms;
}

/* Dark surfaces */
.section--dark {
  --surface: var(--color-ink);
  --surface-raised: var(--color-ink-raised);
  --text: var(--color-paper);
  --text-muted: var(--color-stone);
  --accent: var(--color-blue-light);
  --accent-press: #B5C2FF;
  --on-accent: var(--color-ink);
  --focus: var(--color-blue-light);
}