/* tokens.css — single source of truth for design tokens.
 * Used only by /v2/operator.html. Do not import from legacy operator.css. */
:root {
  /* Surfaces */
  --bg-canvas: #0a0a0f;
  --bg-surface: #111118;
  --bg-elevated: #16161e;
  --bg-input: #1d1d27;
  --border-subtle: #27272a;
  --border-default: #3f3f46;
  --border-strong: #52525b;

  /* Text */
  --text-primary: #fafafa;
  --text-secondary: #d4d4d8;
  --text-tertiary: #a1a1aa;
  --text-muted: #71717a;

  /* Accent (violet/purple) */
  --accent: #a855f7;
  --accent-hover: #9333ea;
  --accent-soft-text: #c084fc;
  --accent-soft-bg: rgba(168, 85, 247, 0.15);
  --accent-soft-border: rgba(168, 85, 247, 0.4);
  --accent-grad: linear-gradient(135deg, #a855f7, #ec4899);

  /* Status */
  --ok: #34d399;
  --ok-soft-bg: rgba(52, 211, 153, 0.12);
  --warn: #fbbf24;
  --warn-soft-bg: rgba(251, 191, 36, 0.12);
  --danger: #f87171;
  --danger-soft-bg: rgba(248, 113, 113, 0.12);
  --info: #60a5fa;
  --info-soft-bg: rgba(96, 165, 250, 0.12);

  /* Brand HH (only for HH markers) */
  --brand-hh: #f97316;

  /* Typography */
  --font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  --fs-display: 32px;
  --fs-title: 24px;
  --fs-section: 18px;
  --fs-body: 14px;
  --fs-secondary: 13px;
  --fs-small: 12px;
  --fs-label: 11px;
  --fw-normal: 400;
  --fw-medium: 600;
  --fw-bold: 700;
  --fw-heavy: 800;

  /* Spacing (4-px grid) */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;

  /* Radii */
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);

  /* Layout */
  --sidebar-width: 220px;
  --sidebar-collapsed: 64px;
  --health-strip-height: 44px;
  --bottom-tab-height: 60px;

  /* Motion — durations */
  --dur-micro: 100ms;   /* press/tap feedback                  */
  --dur-fast: 150ms;    /* hover, focus ring, color/bg change   */
  --dur-base: 220ms;    /* enter/exit: toast, modal, sheet      */
  --dur-slow: 320ms;    /* view transitions, large reveals      */
  --dur-xslow: 520ms;   /* expressive accents, count-up         */

  /* Motion — easing */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Motion — offsets + stagger */
  --move-sm: 4px;
  --move-md: 8px;
  --move-lg: 16px;
  --stagger-step: 40ms;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

body {
  background: var(--bg-canvas);
  color: var(--text-primary);
  font: var(--fw-normal) var(--fs-body) / 1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

[hidden] {
  display: none !important;
}

.mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
}

.caps {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}

a {
  color: var(--accent-soft-text);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}