/* JARVIS Command Center — design tokens (design.md §2). Single source of truth. */

:root {
  /* Background layers (darkest -> lightest) */
  --surface-0: #04060A;
  --surface-1: #080C13;
  --surface-2: #0C1220;
  --surface-3: #111A2B;
  --surface-4: #16223A;
  --overlay-scrim: rgba(4, 6, 10, 0.72);

  /* Accent */
  --accent-cyan: #2BD6FF;
  --accent-cyan-dim: #1789A8;
  --accent-blue: #4E9BFF;
  --accent-blue-deep: #2563EB;
  --glow-cyan: rgba(43, 214, 255, 0.35);

  /* Status (reserved — real semantic state only) */
  --status-ok: #2EE6A8;
  --status-warn: #FFB020;
  --status-error: #FF5C5C;
  --status-info: #4E9BFF;

  /* Text hierarchy */
  --text-hi: #E8F1F8;
  --text-mid: #9DB1C4;
  --text-low: #64798C;
  --text-disabled: #3B4C5E;

  /* Borders / lines */
  --border: #1C2A3E;
  --border-strong: #2A3E5A;
  --border-glow: rgba(43, 214, 255, 0.40);

  /* Typography families (fallback to system when not self-hosted) */
  --font-display: "Rajdhani", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale */
  --display-xl: 2rem;     /* 32px / 600 */
  --display-lg: 1.5rem;   /* 24px / 600 */
  --display-md: 1.125rem; /* 18px / 600 */
  --body-lg: 1rem;        /* 16px / 400 */
  --body: 0.875rem;       /* 14px / 400 */
  --label-sm: 0.75rem;    /* 12px / 500, uppercase */
  --mono-md: 0.875rem;    /* 14px / 500 */
  --mono-sm: 0.75rem;     /* 12px / 400 */

  /* Spacing (4px base) */
  --sp-2: 2px;
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-48: 48px;

  /* Radius */
  --r-sm: 4px;
  --r-md: 6px;
  --r-pill: 999px;

  /* Motion */
  --t-fast: 120ms;
  --t-med: 200ms;
  --t-slow: 300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Cinematic layer (claude-improved) — additive, nothing above changed ---- */

  /* Larger radius for panels/cards */
  --r-lg: 10px;

  /* Glass surfaces: translucent panels over the ambient workspace */
  --glass-1: rgba(10, 16, 28, 0.72);
  --glass-2: rgba(14, 22, 38, 0.78);
  --glass-3: rgba(20, 31, 52, 0.70);
  --glass-blur: 14px;
  --glass-edge: rgba(120, 200, 255, 0.10);    /* hairline top highlight */

  /* Elevation */
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 6px 18px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 14px 44px rgba(0, 0, 0, 0.55);

  /* Live state colour. Hud sets data-voice=<state>; app.css maps it onto
     --state so borders, glows and accents follow JARVIS (registered with
     @property in app.css so it animates between states). */
  --state: #2BD6FF;

  /* Motion */
  --t-xslow: 600ms;
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Layout */
  --header-h: 52px;
  --statusbar-h: 26px;
  --rail-w: 60px;
  --conv-w: 384px;
}