/* ─────────────────────────────────────────────────────────────
   Design Tokens — Threads Operator Dashboard (Dark)
   ───────────────────────────────────────────────────────────── */
:root {
  /* Surfaces (warm-neutral dark) */
  --bg-canvas:    oklch(0.148 0.003 60);   /* app background */
  --bg-surface:   oklch(0.178 0.004 60);   /* cards, panels */
  --bg-elevated:  oklch(0.212 0.005 60);   /* popovers, inputs */
  --bg-hover:     oklch(0.235 0.006 60);
  --bg-active:    oklch(0.265 0.007 60);

  /* Borders / dividers */
  --border-subtle: oklch(0.255 0.005 60 / 0.6);
  --border:        oklch(0.305 0.006 60);
  --border-strong: oklch(0.38 0.008 60);

  /* Text */
  --fg:          oklch(0.96 0.004 80);
  --fg-muted:    oklch(0.74 0.008 75);
  --fg-subtle:   oklch(0.56 0.008 75);
  --fg-faint:    oklch(0.42 0.006 70);

  /* Accent — single brand hue (operator lime) */
  --accent:        oklch(0.82 0.17 142);
  --accent-hover:  oklch(0.87 0.17 142);
  --accent-fg:     oklch(0.18 0.02 142);
  --accent-soft:   oklch(0.82 0.17 142 / 0.12);
  --accent-ring:   oklch(0.82 0.17 142 / 0.35);

  /* Status tokens — same L/C, varied hue */
  --status-pending-fg:  oklch(0.78 0.01 80);
  --status-pending-bg:  oklch(0.35 0.01 80 / 0.5);
  --status-pending-dot: oklch(0.72 0.02 80);

  --status-approved-fg:  oklch(0.82 0.12 235);
  --status-approved-bg:  oklch(0.4 0.12 235 / 0.2);
  --status-approved-dot: oklch(0.74 0.16 235);

  --status-scheduled-fg:  oklch(0.82 0.13 295);
  --status-scheduled-bg:  oklch(0.4 0.13 295 / 0.2);
  --status-scheduled-dot: oklch(0.74 0.16 295);

  --status-published-fg:  oklch(0.84 0.15 155);
  --status-published-bg:  oklch(0.4 0.14 155 / 0.2);
  --status-published-dot: oklch(0.76 0.17 155);

  --status-failed-fg:  oklch(0.78 0.16 25);
  --status-failed-bg:  oklch(0.4 0.15 25 / 0.22);
  --status-failed-dot: oklch(0.7 0.19 25);

  --status-held-fg:  oklch(0.84 0.14 75);
  --status-held-bg:  oklch(0.42 0.13 75 / 0.22);
  --status-held-dot: oklch(0.78 0.16 75);

  /* Type scale */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Radii */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.5);

  /* Layout */
  --sidebar-w: 260px;
  --sidebar-collapsed-w: 64px;
  --topbar-h: 52px;
}

* { box-sizing: border-box; }

html, body, #root {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01';
}

button { font-family: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 10px;
  border: 2px solid var(--bg-canvas);
}
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

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

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}