/* The one palette of the Kratom Coding Platform and its study overview: green accents,
   a light and a dark theme. theme.js sets <html data-theme> before the page paints;
   without JavaScript the system setting decides. The study page (ministry_edition/
   build_ministry.py --study) inlines this file, so a change here reaches both. */
:root, :root[data-theme="light"] {
  --bg: #f3f6f3; --panel: #ffffff; --ink: #1a2420; --ink2: #3d4a43; --quiet: #5c6a63;
  --line: #d9e1da; --line2: #c6d0c8; --chip: #ebf0ec;
  --accent: #1f6e50; --accent-strong: #175a40; --accent-soft: #dfeee5; --accent-ink: #ffffff;
  --bar: #bfd0c5; --ref: #7c8a82; --on-accent: #ffffff;
  --s1: #cfe7da; --s2: #9fd0b5; --s3: #5fae86; --s4: #287a56; --s5: #1a5c40;     /* green scale, low to high */
  --s1-ink: #14241c; --s2-ink: #14241c; --s3-ink: #14241c; --s4-ink: #ffffff; --s5-ink: #ffffff;
  --bar-a: #a8d5bc; --bar-b: #6fb894; --hi-a: #2f8a62; --hi-b: #1a5c40;   /* bar gradients */
  --warn: #8f3a12; --warn-soft: #fbeee5; --warn-bg: #fbf6ea; --warn-line: #e0b85c; --amber: #a15c00;
  --practice: #6a4a00; --practice-soft: #fbf1d8; --focus: #b9821a; --danger: #9b2226;
  --radius: 10px;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #101513; --panel: #18201c; --ink: #e4ebe6; --ink2: #c0ccc5; --quiet: #93a29a;
  --line: #29332e; --line2: #37443d; --chip: #212a25;
  --accent: #5ec594; --accent-strong: #7fd5a9; --accent-soft: #1a3a2b; --accent-ink: #0b1912;
  --bar: #36493f; --ref: #8a998f; --on-accent: #0b1912;
  --s1: #1e3a2d; --s2: #2a5a43; --s3: #2f6d51; --s4: #5fb38a; --s5: #8fdcb3;
  --s1-ink: #e4ebe6; --s2-ink: #e4ebe6; --s3-ink: #e4ebe6; --s4-ink: #0b1912; --s5-ink: #0b1912;
  --bar-a: #2b5e46; --bar-b: #46926d; --hi-a: #5fb38a; --hi-b: #8fdcb3;
  --warn: #f0a370; --warn-soft: #3a2418; --warn-bg: #2d2617; --warn-line: #8a6a2a; --amber: #f1c46a;
  --practice: #f1cf73; --practice-soft: #3a3018; --focus: #e0b350; --danger: #f08a8d;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #101513; --panel: #18201c; --ink: #e4ebe6; --ink2: #c0ccc5; --quiet: #93a29a;
    --line: #29332e; --line2: #37443d; --chip: #212a25;
    --accent: #5ec594; --accent-strong: #7fd5a9; --accent-soft: #1a3a2b; --accent-ink: #0b1912;
    --bar: #36493f; --ref: #8a998f; --on-accent: #0b1912;
    --s1: #1e3a2d; --s2: #2a5a43; --s3: #2f6d51; --s4: #5fb38a; --s5: #8fdcb3;
    --s1-ink: #e4ebe6; --s2-ink: #e4ebe6; --s3-ink: #e4ebe6; --s4-ink: #0b1912; --s5-ink: #0b1912;
    --bar-a: #2b5e46; --bar-b: #46926d; --hi-a: #5fb38a; --hi-b: #8fdcb3;
    --warn: #f0a370; --warn-soft: #3a2418; --warn-bg: #2d2617; --warn-line: #8a6a2a; --amber: #f1c46a;
    --practice: #f1cf73; --practice-soft: #3a3018; --focus: #e0b350; --danger: #f08a8d;
    color-scheme: dark;
  }
}

/* the brand mark and the theme switch in the top bar of both pages */
.brand::before { content: ""; display: inline-block; width: .7em; height: .7em; border-radius: 3px; margin-right: .55em;
  background: linear-gradient(135deg, var(--s3), var(--accent)); vertical-align: -.02em; }
.themebtn { font: inherit; font-size: .85rem; color: var(--ink); background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 12px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.themebtn:hover { border-color: var(--accent); }
.themebtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }