/* ─────────────────────────────────────────────────────────────────────────
   Canonical token layer (loaded globally from main.tsx).

   --ds-* is the single source of truth for chrome colour/shape/type. Its
   BASE (surfaces, text, status, scales) lives here on the brightness axis
   (:root = dark, [data-theme=light] = light) so every screen — including the
   login gate that never loads shell.css — can resolve it.

   The identity axis (accent hue, font family, radius) is overridden per skin
   in app/skins.css via :root[data-skin=…]. The legacy shell aliases
   (--ground/--panel/--ink/--accent/…) are kept as thin pointers into --ds-*
   so older stylesheets (deck.css, auth.css, ws-menu) follow the skin too.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* --ds-* base — dark (cool blue-grey, softer than near-black) */
  --ds-bg: #15171e;
  --ds-surface: #1c1f28;
  --ds-surface-2: #232732;
  --ds-surface-hover: #2b2f3c;
  --ds-border: #2e323f;
  --ds-border-strong: #3d4252;
  --ds-text: #e7e9f0;
  --ds-text-dim: #a3a8b7;
  --ds-text-faint: #6d7282;
  --ds-accent: #f4c542;
  --ds-accent-soft: #f4c5421f;
  --ds-accent-strong: #ddae28;
  --ds-accent-fg: #14140f;
  --ds-ok: #4ade80;
  --ds-ok-soft: #4ade8024;
  --ds-warn: #fbbf24;
  --ds-warn-soft: #fbbf2424;
  --ds-danger: #f87171;
  --ds-danger-soft: #f8717124;
  --ds-info: #60a5fa;
  --ds-info-soft: #60a5fa24;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-radius-sm: 6px;
  --ds-radius-md: 10px;
  --ds-radius-lg: 14px;
  --ds-radius-pill: 999px;
  --ds-shadow-sm: 0 1px 3px #0000002e;
  --ds-shadow-md: 0 4px 12px #0000004d;
  --ds-shadow-lg: 0 16px 48px #00000073;
  --ds-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --ds-dur-fast: 0.1s;
  --ds-dur-normal: 0.2s;
  --ds-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  --ds-display: var(--ds-font);
  --ds-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Legacy shell aliases → thin pointers into --ds-* (skin-driven). */
  --ground: var(--ds-bg);
  --panel: var(--ds-surface);
  --panel-2: var(--ds-surface-2);
  --line: var(--ds-border);
  --line-soft: var(--ds-border);
  --ink: var(--ds-text);
  --ink-dim: var(--ds-text-dim);
  --ink-faint: var(--ds-text-faint);
  --accent: var(--ds-accent);
  --accent-ink: var(--ds-accent-fg);
  --run: var(--ds-ok);
  --wait: var(--ds-warn);
  --err: var(--ds-danger);
  --idle: var(--ds-text-faint);
  --mono: var(--ds-mono);
  --sans: var(--ds-font);
  --shadow: var(--ds-shadow-md);
  color-scheme: dark;
}

:root[data-theme="light"] {
  /* --ds-* base — light (cool, crisp, tech) */
  --ds-bg: #f7f8fa;
  --ds-surface: #ffffff;
  --ds-surface-2: #f3f4f7;
  --ds-surface-hover: #eceef3;
  --ds-border: #e6e8ee;
  --ds-border-strong: #d6d9e2;
  --ds-text: #1b1d26;
  --ds-text-dim: #5a5e6c;
  --ds-text-faint: #9096a4;
  --ds-accent: #4f46e5;
  --ds-accent-soft: #4f46e514;
  --ds-accent-strong: #4338ca;
  --ds-accent-fg: #ffffff;
  --ds-shadow-sm: 0 1px 2px #1b1d2610;
  --ds-shadow-md: 0 4px 14px #1b1d2614;
  --ds-shadow-lg: 0 16px 48px #1b1d261f;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}
html,
body,
#root {
  height: 100%;
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}