/* Tutorium brand token overrides.
 *
 * Loaded via NEXT_PUBLIC_BRAND_CSS (see pages/_document.tsx). Overrides the
 * --op-* design tokens from styles/outpace-tokens.css — see brands/mylq.css
 * for why the whole sheet, not just NEXT_PUBLIC_BG_COLOR, has to move.
 *
 * Values are the Tutorium design system's tokens (its tokens.json, "Light —
 * web" theme); names in brackets are that system's token names.
 *
 *   #ffffff  bg        page is white, panels are white with a 1px hairline
 *   #4b0b12  maroon    the brand brown — ink AND deep ground here (14:1 on white)
 *   #f69522  gold-mark the logo arrow's orange — the highlight fill
 *   #f59e0b  gold      primary accent — a FILL, never text on white (2.2:1)
 *   #f5c84c  gold-glow base of every translucent gold wash
 *   #b45309  gold-ink  accent that reads as text (5.0:1 on white)
 *
 * The canvas stays LIGHT: the app is designed dark-ink-on-light, and so is the
 * Tutorium site. :root:root doubles specificity so this wins over
 * outpace-tokens.css regardless of <link> order.
 */
:root:root {
  /* Canvas & surfaces. blush-soft/cream have no Tutorium token; gray-50 and
     amber-50 from the same Tailwind ramp the brand's greys and golds come from. */
  --op-blush: #ffffff;
  --op-blush-soft: #f9fafb;
  --op-cream: #fffbeb;

  /* Ink — the brand maroon, not the site's grey-black [text]. Body copy and
     the dark cards both go brown; white on it clears 14:1. */
  --op-ink: #4b0b12;

  /* Action / alert. --op-coral is mostly TEXT and thin borders on white, so
     it takes gold-ink, the brand's accent-that-reads (5.0:1; white on it also
     passes). Tint is the brand's hero glow wash, so coral text on coral-tint
     matches the site's programme-tag pairing. */
  --op-coral: #b45309;
  --op-coral-tint: rgba(245, 200, 76, 0.14);

  /* Highlight — --op-yellow is a highlighter fill behind ink text, which is
     exactly what the brand says gold is for. The logo's orange [gold-mark]
     carries it; maroon ink on it clears 6:1. -deep is the site's gold. */
  --op-yellow: #f69522;
  --op-yellow-deep: #f59e0b;
  --op-yellow-bright: #f5c84c;

  /* Deep brand surface / heading colour [maroon, maroon-glow] */
  --op-navy: #4b0b12;
  --op-teal: #780a18;

  /* One family, the system UI stack — the site loads no webfont. The mono
     slot carries headings and the quiz timer; tabular digits keep mm:ss from
     jittering now that it is no longer a monospace face. */
  --op-font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --op-font-mono: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums;

  /* ponytail: the slate ramp and --op-success are inherited. Tutorium's
     muted/muted2 (#374151/#6b7280) sit within a hair of --op-slate-700/-500,
     and green must keep meaning "success". */
}