/* Design tokens — light and dark themes.
   Layout concept: a calm answer-sheet desk. Paper ground, ink text, one teal accent for actions,
   ochre for "marked for review" pencil marks. Content sits in a single readable column; tools use cards. */
:root {
  --paper: #f4f5f1;
  --surface: #ffffff;
  --surface-2: #eef0eb;
  --ink: #15272d;
  --muted: #5a6a6f;
  --line: #d9dfd9;
  --accent: #0f6e66;
  --accent-ink: #ffffff;
  --accent-soft: #e0eeea;
  --ochre: #a86d12;
  --ochre-soft: #f6ead3;
  --good: #2e7a4c;
  --good-soft: #e1f0e6;
  --bad: #ae3a2d;
  --bad-soft: #f7e3df;
  --shadow: 0 1px 2px rgba(21, 39, 45, .06), 0 6px 20px rgba(21, 39, 45, .06);

  --font-display: "Readex Pro", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --step--1: .8125rem;
  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: 1.375rem;
  --step-3: 1.75rem;
  --step-4: clamp(1.9rem, 1.4rem + 2.2vw, 2.75rem);

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;
  --tap: 44px;
  --maxw: 72rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0e191c; --surface: #152327; --surface-2: #1b2c31; --ink: #e5ecea; --muted: #94a5a7; --line: #283a3f;
    --accent: #4db3a5; --accent-ink: #08201d; --accent-soft: #163430; --ochre: #e2a94a; --ochre-soft: #3a2e17;
    --good: #5cc287; --good-soft: #17332a; --bad: #ef7f70; --bad-soft: #3b1f1b; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0e191c; --surface: #152327; --surface-2: #1b2c31; --ink: #e5ecea; --muted: #94a5a7; --line: #283a3f;
  --accent: #4db3a5; --accent-ink: #08201d; --accent-soft: #163430; --ochre: #e2a94a; --ochre-soft: #3a2e17;
  --good: #5cc287; --good-soft: #17332a; --bad: #ef7f70; --bad-soft: #3b1f1b; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
  color-scheme: dark;
}