/* Hopstec Guardian — design tokens */
:root {
  /* Surfaces */
  --surface-0: #060b14;
  --surface-1: #0c1524;
  --surface-2: rgba(17, 28, 45, 0.72);
  --surface-glass: rgba(17, 34, 54, 0.55);

  /* Legacy aliases (backward compat during migration) */
  --c-bg: var(--surface-0);
  --c-nav: #0a1525;
  --c-side: var(--surface-1);
  --c-card: #112236;
  --c-border: rgba(255, 255, 255, 0.08);
  --c-border-md: rgba(255, 255, 255, 0.12);

  /* Brand */
  --accent: #2dd4bf;
  --accent-dim: rgba(45, 212, 191, 0.12);
  --accent-bd: rgba(45, 212, 191, 0.28);
  --brand: #6366f1;
  --brand-dim: rgba(99, 102, 241, 0.15);
  --brand-bd: rgba(99, 102, 241, 0.28);

  --c-accent: var(--accent);
  --c-accent-dim: var(--accent-dim);
  --c-accent-bd: var(--accent-bd);
  --c-indigo: #818cf8;
  --c-indigo-dim: var(--brand-dim);
  --c-indigo-bd: var(--brand-bd);

  /* Text */
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --c-text: var(--text-primary);
  --c-text-dim: var(--text-muted);
  --c-muted: #4a6080;

  /* Risk semantics */
  --risk-critical: #ef4444;
  --risk-high: #f97316;
  --risk-medium: #eab308;
  --risk-low: #22c55e;

  /* Motion */
  --motion-fast: 150ms;
  --motion-base: 200ms;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Focus ring (WCAG) */
  --focus-ring: 0 0 0 2px var(--surface-0), 0 0 0 4px var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}