/* Grain shared visual layer for older lesson modules.
   Add after a page's legacy <style> block so the design tokens win without
   replacing its existing lesson logic, navigation, or responsive layout. */
html[data-course-theme="grain"] {
  color-scheme: light;
  --bg: var(--color-bg);
  --panel: var(--color-surface);
  --card: var(--color-surface);
  --ink: var(--color-text);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --dim: var(--color-text-muted);
  --line: var(--color-border);
  --border: var(--color-border);
  --accent: var(--color-primary);
  --soft: var(--color-primary-soft);
  --good: var(--color-success-soft);
  --bad: var(--color-danger-soft);
  --warn: var(--color-warning-soft);
  --yellow: var(--color-accent);
  --shadow: var(--shadow-md);
}
html[data-theme="dark"][data-course-theme="grain"] {
  color-scheme: dark;
  --bg: var(--stone-900);
  --panel: var(--stone-800);
  --card: var(--stone-800);
  --ink: var(--stone-50);
  --text: var(--stone-50);
  --muted: var(--stone-300);
  --dim: var(--stone-300);
  --line: var(--stone-700);
  --border: var(--stone-700);
  --accent: var(--clay-400);
  --soft: var(--clay-900);
  --good: var(--leaf-700);
  --bad: var(--rust-700);
  --warn: var(--amber-700);
  --yellow: var(--amber-300);
  --shadow: var(--shadow-lg);
}
html[data-course-theme="grain"] body {
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased;
}
html[data-course-theme="grain"] h1,
html[data-course-theme="grain"] h2,
html[data-course-theme="grain"] h3,
html[data-course-theme="grain"] h4 {
  font-family: var(--font-display) !important;
  letter-spacing: var(--tracking-tight);
}
html[data-course-theme="grain"] a { color: var(--accent); }
html[data-course-theme="grain"] .top,
html[data-course-theme="grain"] .topbar,
html[data-course-theme="grain"] header.top {
  background: var(--panel) !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--line) !important;
}
html[data-course-theme="grain"] .top a,
html[data-course-theme="grain"] .topbar a,
html[data-course-theme="grain"] header.top a {
  color: var(--ink) !important;
}
html[data-course-theme="grain"] .hero {
  background: linear-gradient(125deg, var(--color-primary-soft), var(--color-surface)) !important;
  color: var(--ink) !important;
  border: 1px solid var(--color-primary-border) !important;
  box-shadow: var(--shadow-md) !important;
}
html[data-theme="dark"][data-course-theme="grain"] .hero {
  background: linear-gradient(125deg, var(--clay-900), var(--stone-800)) !important;
  border-color: var(--clay-700) !important;
  box-shadow: var(--shadow-lg) !important;
}
html[data-course-theme="grain"] .hero p,
html[data-course-theme="grain"] .lead,
html[data-course-theme="grain"] .muted,
html[data-course-theme="grain"] .meta,
html[data-course-theme="grain"] .goal,
html[data-course-theme="grain"] .footer {
  color: var(--muted) !important;
}
html[data-course-theme="grain"] .hero h1 { color: var(--ink) !important; }
html[data-course-theme="grain"] .card,
html[data-course-theme="grain"] .panel,
html[data-course-theme="grain"] .example,
html[data-course-theme="grain"] .quiz {
  background: var(--panel) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow-xs);
}
html[data-course-theme="grain"] .callout,
html[data-course-theme="grain"] .label,
html[data-course-theme="grain"] .pill,
html[data-course-theme="grain"] .step,
html[data-course-theme="grain"] .lesson-btn .num,
html[data-course-theme="grain"] .chain li:before {
  background: var(--soft) !important;
  color: var(--accent) !important;
  border-color: var(--color-primary-border) !important;
}
html[data-course-theme="grain"] .callout {
  border-left: 4px solid var(--accent) !important;
}
html[data-course-theme="grain"] .warning,
html[data-course-theme="grain"] .bad,
html[data-course-theme="grain"] .feedback.bad {
  background: var(--warn) !important;
  color: var(--ink) !important;
  border-color: var(--color-warning) !important;
}
html[data-course-theme="grain"] .good,
html[data-course-theme="grain"] .feedback.good,
html[data-course-theme="grain"] .answer.correct {
  background: var(--good) !important;
  color: var(--ink) !important;
  border-color: var(--color-success) !important;
}
html[data-course-theme="grain"] .lesson-btn,
html[data-course-theme="grain"] .navlesson {
  color: var(--ink);
}
html[data-course-theme="grain"] .lesson-btn:hover,
html[data-course-theme="grain"] .lesson-btn.active,
html[data-course-theme="grain"] .navlesson:hover,
html[data-course-theme="grain"] .navlesson.active {
  background: var(--soft) !important;
  color: var(--accent) !important;
  border-color: var(--color-primary-border) !important;
}
html[data-course-theme="grain"] .answer,
html[data-course-theme="grain"] .option,
html[data-course-theme="grain"] .nav a,
html[data-course-theme="grain"] .nav button {
  background: var(--panel) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html[data-course-theme="grain"] .answer:hover,
html[data-course-theme="grain"] .option:hover,
html[data-course-theme="grain"] .nav a:hover {
  border-color: var(--accent) !important;
}
html[data-course-theme="grain"] .answer.wrong {
  background: var(--bad) !important;
  border-color: var(--color-danger) !important;
}
html[data-course-theme="grain"] .progressbar,
html[data-course-theme="grain"] .bar,
html[data-course-theme="grain"] .track {
  background: var(--color-surface-sunken) !important;
}
html[data-course-theme="grain"] .progressbar span,
html[data-course-theme="grain"] .bar > div,
html[data-course-theme="grain"] .track span {
  background: var(--accent) !important;
}
html[data-course-theme="grain"] button.primary,
html[data-course-theme="grain"] .btn,
html[data-course-theme="grain"] .actions button:not(.secondary) {
  background: var(--accent) !important;
  color: var(--color-text-on-primary) !important;
  border: 1px solid var(--accent) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-sans) !important;
}
html[data-course-theme="grain"] button.primary:hover,
html[data-course-theme="grain"] .btn:hover,
html[data-course-theme="grain"] .actions button:not(.secondary):hover {
  background: var(--color-primary-hover) !important;
}
html[data-theme="dark"][data-course-theme="grain"] button.primary,
html[data-theme="dark"][data-course-theme="grain"] .btn,
html[data-theme="dark"][data-course-theme="grain"] .actions button:not(.secondary) {
  color: var(--stone-900) !important;
}
html[data-course-theme="grain"] .actions button.secondary,
html[data-course-theme="grain"] .btn.secondary {
  background: var(--panel) !important;
  color: var(--accent) !important;
  border: 1px solid var(--line) !important;
}
html[data-course-theme="grain"] table {
  background: var(--panel) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html[data-course-theme="grain"] th {
  background: var(--color-surface-sunken) !important;
  color: var(--ink) !important;
}
html[data-course-theme="grain"] td,
html[data-course-theme="grain"] th {
  border-color: var(--line) !important;
}
html[data-course-theme="grain"] input,
html[data-course-theme="grain"] textarea,
html[data-course-theme="grain"] select {
  color: var(--ink) !important;
  background: var(--panel) !important;
  border-color: var(--line) !important;
  font-family: var(--font-sans);
}
html[data-course-theme="grain"] input:focus,
html[data-course-theme="grain"] textarea:focus,
html[data-course-theme="grain"] select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
html[data-course-theme="grain"] .footer { border-color: var(--line) !important; }

/* Token bridge for focused practice tools: preserve their exercise-specific
   layouts while sharing Grain typography and the Zinc/Sky semantic palette. */
html[data-course-theme="tool"] {
  color-scheme: light;
  --bg: var(--color-bg); --ink: var(--color-text); --text: var(--color-text);
  --muted: var(--color-text-muted); --dim: var(--color-text-muted);
  --line: var(--color-border); --accent: var(--color-primary);
  --card: var(--color-surface); --ok: var(--color-success);
  --okbg: var(--color-success-soft); --no: var(--color-danger);
  --dim-blue: var(--teal-500); --meas-green: var(--leaf-700);
  --mono: var(--font-mono);
}
html[data-course-theme="tool"] body {
  background: var(--bg); color: var(--ink); font-family: var(--font-sans);
}
html[data-course-theme="tool"] h1,
html[data-course-theme="tool"] h2,
html[data-course-theme="tool"] h3,
html[data-course-theme="tool"] h4 {
  font-family: var(--font-display); letter-spacing: var(--tracking-tight);
}
html[data-course-theme="tool"] code,
html[data-course-theme="tool"] pre,
html[data-course-theme="tool"] .mono { font-family: var(--font-mono); }
html[data-course-theme="tool"] a { color: var(--accent); }