/* LessonKeys design tokens. Source of truth: brand/colour.md, typography.md, visual.md.
   Copied into site/assets/tokens.css at build time; edit HERE, not the copy. */

:root {
  /* Colour: light */
  --lk-paper: #F5F4FF;
  --lk-paper-raised: #FFFFFF;
  --lk-paper-sunk: #ECEAFB;
  --lk-line: #DAD7F2;
  --lk-ink: #15132B;
  --lk-ink-muted: #5A5878;
  --lk-ink-faint: #7C7A9C;
  --lk-accent: #5B3DF5;
  --lk-accent-ink: #FFFFFF;
  --lk-accent-wash: #E9E5FF;

  /* Play view (reserved; see colour.md) */
  --lk-stage: #0B0A14;
  --lk-hand-right: #A99BFF;
  --lk-hand-left: #17917F;
  --lk-correct: #9B8CFF;
  --lk-wrong: #FF5CA8;
  --lk-gold: #F5A300;
  --lk-flame: #F26B1D;

  /* Type */
  --lk-font-serif: ui-serif, "New York", "Source Serif 4", Georgia, serif;
  --lk-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;

  /* Space (8pt grid) */
  --lk-space-1: 4px;
  --lk-space-2: 8px;
  --lk-space-3: 12px;
  --lk-space-4: 16px;
  --lk-space-5: 24px;
  --lk-space-6: 32px;
  --lk-space-7: 48px;
  --lk-space-8: 64px;
  --lk-space-9: 96px;

  /* Shape */
  --lk-radius: 12px;
  --lk-radius-lg: 20px;
  --lk-radius-pill: 999px;
  --lk-shadow: 0 1px 2px rgb(21 19 43 / 6%), 0 8px 24px rgb(21 19 43 / 6%);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lk-paper: #100F1E;
    --lk-paper-raised: #1A1830;
    --lk-paper-sunk: #0A0914;
    --lk-line: #2A2745;
    --lk-ink: #F3F2FF;
    --lk-ink-muted: #A09DBD;
    --lk-ink-faint: #6E6B8F;
    --lk-accent: #9B8CFF;
    --lk-accent-ink: #120B3A;
    --lk-accent-wash: #2A2060;
    --lk-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 30%);
  }
}

:root[data-theme="dark"] {
  --lk-paper: #100F1E;
  --lk-paper-raised: #1A1830;
  --lk-paper-sunk: #0A0914;
  --lk-line: #2A2745;
  --lk-ink: #F3F2FF;
  --lk-ink-muted: #A09DBD;
  --lk-ink-faint: #6E6B8F;
  --lk-accent: #9B8CFF;
  --lk-accent-ink: #120B3A;
  --lk-accent-wash: #2A2060;
  --lk-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 30%);
}