/*
 * Paint Plan Play: the colour of each Section, sampled from the logo, the
 * logo's own background, and the theme every Section wears (surfaces, text,
 * fonts). The same values as tokens.ts, for stylesheets.
 */
:root {
  --section-paint: #fc7704;
  --section-plan: #0094e4;
  --section-play: #59aa2a;
  --brand-ink: #060b11;

  /* Surfaces, from the shell around the page to a card, then their rules. */
  --theme-shell: #06060a;
  --theme-bg: #0a0a0f;
  --theme-panel: #12121a;
  --theme-card: #1a1a24;
  --theme-border: #2a2a36;
  --theme-border-hi: #3d3d4c;

  --theme-text: #f0f0f5;
  --theme-text-dim: #b9bbc8;
  --theme-muted: #9596a6;
  --theme-faint: #6e6f80;

  --font-ui: 'IBM Plex Sans', system-ui, sans-serif;
  --font-cond: 'IBM Plex Sans Condensed', 'IBM Plex Sans', sans-serif;
  --font-num: 'IBM Plex Mono', ui-monospace, monospace;

  /* The accent where no Section is: the Dashboard. */
  --accent: #c9cdd6;
}

/* The accent of a Section: `data-section` on the page, or on any part of it. */
[data-section='paint'] {
  --accent: var(--section-paint);
}

[data-section='plan'] {
  --accent: var(--section-plan);
}

[data-section='play'] {
  --accent: var(--section-play);
}

/* What follows the accent, wherever it is set: its lighter shade and its text. */
:root,
[data-section] {
  --accent-hi: color-mix(in srgb, var(--accent) 72%, white);
  --on-accent: var(--theme-shell);
}