/* common/tokens.css — the shared design tokens for every SCML web tool. Linked before common/shell.css
   and each app's own stylesheet. Light default, OS-dark auto, and an explicit data-theme override;
   `color-scheme` is set so native controls (selects, scrollbars) follow the theme.

   The reader, import app and template editor consume these names directly. The document editor keeps
   its own, richer, slate-based palette under a different vocabulary (--ink / --faint / --r / --danger …)
   and bridges the shared names onto it in editor.css (`--text: var(--ink)`, `--radius: var(--r)`, …),
   so common/shell.css renders in the editor's colours while its richer chrome stays as overrides. */

:root {
  color-scheme: light;
  --bg: #f4f5f7; --surface: #fff; --surface-2: #f7f8fa; --text: #1a1a1a; --text-dim: #5b6470;
  --border: #e2e5ea; --border-strong: #cfd4db; --accent: #0a6b3b; --accent-ink: #fff;
  --ok: #0a6b3b; --ok-bg: #e8f5ee; --warn: #b3261e; --warn-bg: #fdecea; --muted-bg: #eceef1;
  --chip: #e6f0ff; --chip-ink: #1a4d8f; --region: #f4efe4; --region-line: #cbb98a;
  --radius: 8px; --radius-sm: 6px; --shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);

  /* Shared authoring block-surface tokens (common/block.css); an app stylesheet may override them. */
  --accent-soft: color-mix(in srgb, var(--accent) 13%, var(--surface)); --accent-strong: #0a6b3b;
  --accent-ring: color-mix(in srgb, var(--accent) 55%, transparent);
  --ink: #0f172a; --muted: #475569; --faint: #5c6675; --r-xs: 5px; --r-sm: 7px;
  --mono: "SFMono-Regular", ui-monospace, Consolas, "Liberation Mono", Menlo, monospace;

  /* Spacing scale — one rhythm for paddings and gaps across the chrome (theme-independent). */
  --space-1: 0.25rem; --space-2: 0.4rem; --space-3: 0.6rem; --space-4: 0.9rem;
  --space-5: 1.25rem; --space-6: 1.75rem;
  /* Type scale — the shared chrome text sizes (document/preview content sets its own sizes). */
  --text-xs: 0.72rem; --text-sm: 0.8rem; --text-md: 0.85rem; --text-base: 1rem;
  --text-lg: 1.15rem; --text-xl: 1.4rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f1113; --surface: #17191c; --surface-2: #1c1f22; --text: #e6e6e6; --text-dim: #9aa3ad;
    --border: #2a2e33; --border-strong: #3a4046; --accent: #4ec38a; --accent-ink: #0b1f16;
    --ok: #4ec38a; --ok-bg: #14261d; --warn: #f2857c; --warn-bg: #2a1614; --muted-bg: #23272c;
    --chip: #16324f; --chip-ink: #9cc4f5; --region: #211d12; --region-line: #6d5f2a;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 18px rgba(0,0,0,.5);
    --accent-soft: color-mix(in srgb, var(--accent) 22%, var(--surface)); --accent-strong: #8fe3b8;
    --accent-ring: color-mix(in srgb, var(--accent) 65%, transparent);
    --ink: #e7edf4; --muted: #aab6c4; --faint: #8b97a5;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1113; --surface: #17191c; --surface-2: #1c1f22; --text: #e6e6e6; --text-dim: #9aa3ad;
  --border: #2a2e33; --border-strong: #3a4046; --accent: #4ec38a; --accent-ink: #0b1f16;
  --ok: #4ec38a; --ok-bg: #14261d; --warn: #f2857c; --warn-bg: #2a1614; --muted-bg: #23272c;
  --chip: #16324f; --chip-ink: #9cc4f5; --region: #211d12; --region-line: #6d5f2a;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 18px rgba(0,0,0,.5);
  --accent-soft: color-mix(in srgb, var(--accent) 22%, var(--surface)); --accent-strong: #8fe3b8;
  --accent-ring: color-mix(in srgb, var(--accent) 65%, transparent);
  --ink: #e7edf4; --muted: #aab6c4; --faint: #8b97a5;
}