/* Shared design tokens. The web shell (web/css/site.css) and the app (app.css) must use ONLY these
   variables for colour, type, radius and spacing, so both look like one product. Seeded by the lead;
   the UI owner may refine values (keeping contrast >= 4.5:1 for text) but must not rename tokens. */
:root {
  color-scheme: light dark;

  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #eef0f4;
  --border: #d7dbe3;
  --text: #1a1d24;
  --text-muted: #4d5565;
  --accent: #2457d6;
  --accent-hover: #1b47b3;
  --accent-contrast: #ffffff;
  --danger: #b3261e;
  --warning-bg: #fff4d6;
  --warning-text: #5c4300;
  --mark-bg: #ffe066;
  --mark-active-bg: #ff9f1c;
  --mark-text: #111111;
  --focus: #1b6ef3;
  --overlay: rgba(15, 18, 25, 0.55);

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 16px rgba(16, 24, 40, 0.08);

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 40px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12141a;
    --surface: #1b1e27;
    --surface-2: #252936;
    --border: #343948;
    --text: #e8eaf0;
    --text-muted: #aeb5c5;
    --accent: #7ea6ff;
    --accent-hover: #a3bfff;
    --accent-contrast: #0c1630;
    --danger: #ff8a80;
    --warning-bg: #3a2f10;
    --warning-text: #ffe29a;
    --focus: #8ab4ff;
    --overlay: rgba(0, 0, 0, 0.65);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.45);
  }
}

:root[data-theme="dark"] {
  --bg: #12141a;
  --surface: #1b1e27;
  --surface-2: #252936;
  --border: #343948;
  --text: #e8eaf0;
  --text-muted: #aeb5c5;
  --accent: #7ea6ff;
  --accent-hover: #a3bfff;
  --accent-contrast: #0c1630;
  --danger: #ff8a80;
  --warning-bg: #3a2f10;
  --warning-text: #ffe29a;
  --focus: #8ab4ff;
  --overlay: rgba(0, 0, 0, 0.65);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.45);
}