/*
 * Code & Commerce dark theme: the same token names as theme.css with values for dark surfaces.
 * Loaded after theme.css on the quiz site only (the shop stays light). _Head chooses when: always (the person chose
 * dark), never (they chose light), or only when their device is in dark mode (no choice yet). See docs/branding.md.
 */
:root {
  color-scheme: dark;

  --brand-ink: #d6e4f2;          /* headings and primary buttons become light on dark */
  --brand-ink-hover: #e8f0f8;
  --brand-ink-raised: #1b324a;
  --brand-on-ink: #0b1a2b;       /* text on the (now light) primary buttons */
  --brand-on-ink-muted: #3b4d63;
  --brand-highlight: #f07fae;
  --brand-highlight-soft: #f2a7c3;
  --brand-mark-ring: #4fa3c2;

  --accent-1: #6cc3e0;
  --accent-1-soft: #13323e;
  --accent-2: #c3a0e0;
  --accent-2-soft: #2b1f38;
  --accent-3: #f07fae;
  --accent-3-soft: #3b1828;

  --quiz: #3fbfae;
  --quiz-soft: #10302c;

  --correct: #6cc067;
  --correct-ink: #a8e0a4;
  --correct-soft: #16311b;
  --wrong: #f2766b;
  --wrong-ink: #ffb4ab;
  --wrong-soft: #3b1815;
  --warning-soft: #3a2b0d;
  --warning-ink: #f6d07f;

  --surface-page: #0d1722;
  --surface-sunken: #09121b;
  --surface-card: #13212f;
  --surface-raised: #1a2a3c;
  --line: #24384d;
  --line-strong: #375169;
  --text: #dfe6ee;
  --text-muted: #a6b3c3;
  --text-faint: #7a8a9e;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35);
  --shadow: 0 1px 2px rgb(0 0 0 / 0.35), 0 4px 16px rgb(0 0 0 / 0.30);
  --shadow-lg: 0 2px 4px rgb(0 0 0 / 0.35), 0 16px 40px rgb(0 0 0 / 0.45);
  --shadow-xl: 0 4px 8px rgb(0 0 0 / 0.35), 0 30px 80px rgb(0 0 0 / 0.55);
  --focus-ring: 0 0 0 3px rgb(108 195 224 / 0.45);
  --on-fill: #0b1a2b;            /* text on the lighter accent fills */

  --night: #070f19;
  --night-raised: #10213a;
  --night-line: #20364f;
  --on-night: #f6f5f0;
  --on-night-muted: #a9b6c8;

  --quiz-ink: #74dccb;
  --quiz-bright: #5fd3c2;
  --sun: #f2b84b;
  --sun-soft: #352a0f;
  --sun-ink: #f6d07f;
  --misconception: #fb8f55;
  --misconception-soft: #3b1e0e;
}