/* ─────────────────────────────────────────────────────────────────────────
   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;
  /* Type scale — the single source of truth for font-size. Components use these
     tokens, never a raw px literal (see DESIGN.md §2). Base 14px matches the
     Geist / Vercel pro-tool convention; the app is a dense console, so the
     workhorse UI text is -sm/-md (12/13px), -base is body default, and ≥-xl is
     display. Rogue sizes (8/9/18/19/22/26px) snap to the nearest step. */
  --ds-text-2xs: 10px;
  --ds-text-xs: 11px;
  --ds-text-sm: 12px;
  --ds-text-md: 13px;
  --ds-text-base: 14px;
  --ds-text-lg: 16px;
  --ds-text-xl: 20px;
  --ds-text-2xl: 24px;
  --ds-text-3xl: 28px;
  /* Reading surface only (conversation message bodies): a dedicated 15px that
     sits between chrome -base (14) and -lg (16). Deliberately off the integer
     chrome ladder — a reading page wants a hair more than dense UI, a hair less
     than a marketing article. Do NOT use for chrome. */
  --ds-text-reading: 15px;
  /* Line-height by role. UI text is -ui (1.45); reading content (chat/markdown)
     keeps -relaxed/-loose. Display/headings tighten. Loose line-height on dense
     UI is what reads as "big/airy" — keep it off chrome. */
  --ds-leading-tight: 1.25;
  --ds-leading-snug: 1.35;
  --ds-leading-ui: 1.45;
  --ds-leading-relaxed: 1.55;
  --ds-leading-loose: 1.65;
  /* Optical letter-spacing: large text tightens (Geist convention), body stays
     neutral. Apply -snug on 18–20px headings, -tight on ≥24px display. */
  --ds-tracking-tight: -0.02em;
  --ds-tracking-snug: -0.01em;
  --ds-tracking-normal: 0;
  /* CLI / xterm snapshot surface — dark-locked; does not follow brightness. */
  --ds-term-bg: #15171e;
  --ds-term-fg: #e7e9f0;

  /* 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: var(--ds-text-base);
  line-height: var(--ds-leading-ui);
  -webkit-font-smoothing: antialiased;
}
/* The app is a fixed workspace, not a document page. On touch devices the
   browser root must not rubber-band into blank space; each panel owns its own
   scroll container (terminal scrollback, chat history, settings, files). */
@media (max-width: 860px), (pointer: coarse) {
  html,
  body,
  #root {
    width: 100%;
    height: var(--adk-viewport-height, 100dvh);
    max-height: var(--adk-viewport-height, 100dvh);
    overflow: hidden;
    overscroll-behavior: none;
  }
  body {
    position: fixed;
    top: var(--adk-viewport-top, 0px);
    right: 0;
    bottom: auto;
    left: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}