/* Design tokens — "call sheet on plywood" (see docs/design-spec.md).
   Layers: primitives (raw values) → semantic (--bg, --ink…) via [data-theme]. */

:root {
  /* Spacing scale */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;

  /* Named z-index scale */
  --z-card-drag: 10;
  --z-overlay: 100;
  --z-toast: 200;

  /* Type */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Public Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Motion */
  --ease: cubic-bezier(0.3, 0.8, 0.3, 1);
  --dur-s: 180ms;
  --dur-m: 320ms;

  /* Radii & rails */
  --r-card: 6px;
  --r-panel: 10px;
  --rail: 3px; /* label colour rail on card edge */

  /* Label hues — one per named colour, theme-independent chip fills */
  --label-rojo: #c8372d;
  --label-amber: #b7791f;
  --label-moss: #3d7a3d;
  --label-teal: #0f6f68;
  --label-indigo: #4054a8;
  --label-plum: #8a3d72;
}

/* ---------- Light: warm paper on a desk ---------- */
:root,
[data-theme="light"] {
  color-scheme: light;
  --bg: #f3efe7;
  --bg-grain: #e9e4d8;
  --surface: #fffdf8;
  --surface-sunk: #f6f2e9;
  --ink: #1d1a15;
  --muted: #6d675c;
  --faint: #a49d8f;
  --line: #d9d2c3;
  --line-strong: #bfb6a3;
  --accent: #0f6f68;
  --accent-ink: #ffffff;
  --accent-soft: #dcebe8;
  --shock: #c8372d;
  --shock-soft: #f5dedb;
  --shadow-card: 0 1px 2px rgb(29 26 21 / 0.10), 0 2px 6px rgb(29 26 21 / 0.06);
  --shadow-lift: 0 3px 8px rgb(29 26 21 / 0.14), 0 10px 24px rgb(29 26 21 / 0.10);
  --shadow-panel: 0 12px 40px rgb(29 26 21 / 0.22);
}

/* ---------- Dark: same desk, lights off ---------- */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171612;
  --bg-grain: #1d1c17;
  --surface: #211f1a;
  --surface-sunk: #1b1a15;
  --ink: #ece7db;
  --muted: #a49d8f;
  --faint: #6d675c;
  --line: #37342c;
  --line-strong: #4c483d;
  --accent: #3fc0b4;
  --accent-ink: #10201d;
  --accent-soft: #1e3a36;
  --shock: #ef6a5a;
  --shock-soft: #3c241f;
  --label-amber: #d9a441;
  --label-moss: #6fae6f;
  --label-teal: #3fc0b4;
  --label-indigo: #8d9fe8;
  --label-plum: #c98ab2;
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.45), 0 2px 6px rgb(0 0 0 / 0.30);
  --shadow-lift: 0 3px 8px rgb(0 0 0 / 0.55), 0 12px 28px rgb(0 0 0 / 0.45);
  --shadow-panel: 0 12px 48px rgb(0 0 0 / 0.6);
}