/* LearnOS design tokens — light by default, dark via data-theme or device preference. */
:root {
  --bench: #f4f7f9;        /* page background: cool lab bench */
  --sheet: #ffffff;        /* reading surface */
  --sheet-2: #eaf0f4;      /* recessed surface, table headers */
  --ink: #18263a;          /* primary text */
  --ink-2: #44546a;        /* secondary text */
  --rule: #c9d4de;         /* borders and dividers */
  --teal: #0d6b66;         /* actions, links, focus */
  --teal-ink: #ffffff;
  --teal-wash: #e1f1ef;
  --amber: #8f5300;        /* stimulus / in-review signal */
  --amber-wash: #fbefdc;
  --red: #b42318;
  --red-wash: #fde8e6;
  --green: #1d6e37;
  --green-wash: #e3f3e8;
  --trace-a: #0d6b66;      /* chart series */
  --trace-b: #8f5300;
  --trace-c: #5b4b9a;

  --font-read: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, sans-serif;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.5rem;
  --step-3: 2rem;
  --step-4: 2.625rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --radius-s: 4px;
  --radius-m: 8px;
  --measure: 68ch;
  --nav-w: 15rem;
  --focus: 3px solid var(--teal);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bench: #0f1722;
    --sheet: #152030;
    --sheet-2: #1c2a3d;
    --ink: #e4ebf3;
    --ink-2: #a9b8c9;
    --rule: #2f4058;
    --teal: #5cc8bf;
    --teal-ink: #0f1722;
    --teal-wash: #12342f;
    --amber: #e9a74c;
    --amber-wash: #3a2a12;
    --red: #ff8a80;
    --red-wash: #3d1a17;
    --green: #7fd69a;
    --green-wash: #163323;
    --trace-a: #5cc8bf;
    --trace-b: #e9a74c;
    --trace-c: #b4a6f0;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bench: #0f1722;
  --sheet: #152030;
  --sheet-2: #1c2a3d;
  --ink: #e4ebf3;
  --ink-2: #a9b8c9;
  --rule: #2f4058;
  --teal: #5cc8bf;
  --teal-ink: #0f1722;
  --teal-wash: #12342f;
  --amber: #e9a74c;
  --amber-wash: #3a2a12;
  --red: #ff8a80;
  --red-wash: #3d1a17;
  --green: #7fd69a;
  --green-wash: #163323;
  --trace-a: #5cc8bf;
  --trace-b: #e9a74c;
  --trace-c: #b4a6f0;
  color-scheme: dark;
}

:root[data-text-size="large"] { font-size: 112.5%; }