/*
 * Vestyn design tokens — canonical sheet.
 * The web app imports this file unchanged; see design-system.md for usage rules.
 * Themes: light is default; dark via prefers-color-scheme or [data-theme="dark"].
 */

:root {
  /* ── color: light ("Paper") ─────────────────────────────── */
  --bg: #f7f5f0;
  --surface: #ffffff;
  --surface-sunken: #efece5;
  --ink: #201e1a;
  --ink-muted: #5f5a52;
  --ink-faint: #8a8478;
  --line: #e2ddd2;

  --accent: #a6512d;
  --accent-hover: #8f4526;
  --on-accent: #ffffff;

  --ok: #3d7a5b;
  --warn: #996f21;
  --danger: #b3372e;

  /* ── type ───────────────────────────────────────────────── */
  --font-display: "Fraunces", georgia, serif;
  --font-ui: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --text-caption: 12px/16px var(--font-ui);
  --text-secondary: 13px/18px var(--font-ui);
  --text-base: 14px/20px var(--font-ui);
  --text-emphasized: 16px/24px var(--font-ui);
  --text-title: 500 20px/28px var(--font-ui);
  --text-page: 600 25px/32px var(--font-ui);
  --text-display: 31px/38px var(--font-display);

  /* ── space (4px grid) ───────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* ── shape ──────────────────────────────────────────────── */
  --radius-control: 6px;
  --radius-card: 10px;
  --radius-modal: 14px;

  /* ── depth (borders first; only two shadows exist) ──────── */
  --shadow-pop: 0 4px 16px rgb(32 30 26 / 0.10), 0 1px 3px rgb(32 30 26 / 0.08);
  --shadow-modal: 0 12px 40px rgb(32 30 26 / 0.18), 0 2px 6px rgb(32 30 26 / 0.10);

  /* ── motion ─────────────────────────────────────────────── */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration-state: 120ms;
  --duration-surface: 200ms;

  /* ── layout ─────────────────────────────────────────────── */
  --pane-sidebar: 248px;
  --pane-list: 336px;

  /* ── controls ───────────────────────────────────────────── */
  --control-height: 36px;
  --control-height-small: 30px;
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  color-scheme: light;
}

/* ── color: dark ("Slate") ────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #181613;
    --surface: #211e1a;
    --surface-sunken: #14120f;
    --ink: #ece8e0;
    --ink-muted: #a59e91;
    --ink-faint: #736d61;
    --line: #37332c;

    --accent: #d98a60;
    --accent-hover: #e29b76;
    --on-accent: #2a1409;

    --ok: #7cbb97;
    --warn: #d4a24e;
    --danger: #e07b72;

    --shadow-pop: 0 4px 16px rgb(0 0 0 / 0.45), 0 1px 3px rgb(0 0 0 / 0.35);
    --shadow-modal: 0 12px 40px rgb(0 0 0 / 0.55), 0 2px 6px rgb(0 0 0 / 0.40);

    color-scheme: dark;
  }
}

[data-theme="dark"] {
  --bg: #181613;
  --surface: #211e1a;
  --surface-sunken: #14120f;
  --ink: #ece8e0;
  --ink-muted: #a59e91;
  --ink-faint: #736d61;
  --line: #37332c;

  --accent: #d98a60;
  --accent-hover: #e29b76;
  --on-accent: #2a1409;

  --ok: #7cbb97;
  --warn: #d4a24e;
  --danger: #e07b72;

  --shadow-pop: 0 4px 16px rgb(0 0 0 / 0.45), 0 1px 3px rgb(0 0 0 / 0.35);
  --shadow-modal: 0 12px 40px rgb(0 0 0 / 0.55), 0 2px 6px rgb(0 0 0 / 0.40);

  color-scheme: dark;
}

/* ── global resets tied to tokens ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-state: 0ms;
    --duration-surface: 0ms;
  }
}