/* Design tokens — the single source of truth for color, spacing, radius,
   shadow, and motion. Dark theme is the default (fits the CAD/dispatch
   feel); :root[data-theme="light"] overrides for users who toggle it. */

:root {
  /* Surfaces */
  --color-bg: #0b0f17;
  --color-bg-elevated: #111827;
  --color-surface: #161d2b;
  --color-surface-hover: #1c2437;
  --color-border: #232c40;
  --color-border-strong: #2f3a52;

  /* Text */
  --color-text: #e7ebf3;
  --color-text-muted: #9aa5b9;
  --color-text-faint: #6b7690;

  /* Brand / accent */
  --color-accent: #3b82f6;
  --color-accent-hover: #5b93f7;
  --color-accent-contrast: #061225;

  /* Status */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-info: #0ea5e9;
  --color-critical: #ef4444;

  /* Priority scale (mirrors app/constants.py PRIORITY_COLORS) */
  --priority-low: #22c55e;
  --priority-medium: #f59e0b;
  --priority-high: #f97316;
  --priority-critical: #ef4444;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-glow-accent: 0 0 0 1px rgba(59, 130, 246, 0.4), 0 0 24px rgba(59, 130, 246, 0.15);

  /* Ambient background texture (hero glow + faint scan-line grid) */
  --color-glow: rgba(59, 130, 246, 0.14);
  --color-grid-line: rgba(255, 255, 255, 0.025);

  /* Terminal-chrome primitives (corner brackets, LED status dots) */
  --bracket-size: 10px;
  --bracket-thickness: 2px;
  --bracket-color: var(--color-border-strong);
  --led-ring-opacity: 0.35;
  --tracking-label: 0.06em;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;
  --duration-slower: 2400ms;
  --stagger-step: 40ms;

  /* Typography */
  --font-sans: "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono var", ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;

  /* Layout */
  --header-height: 64px;
  --content-max-width: 1280px;
}

:root[data-theme="light"] {
  --color-bg: #f4f6fb;
  --color-bg-elevated: #ffffff;
  --color-surface: #ffffff;
  --color-surface-hover: #eef1f8;
  --color-border: #dde3ef;
  --color-border-strong: #c7cfe0;

  --color-text: #101828;
  --color-text-muted: #4b5468;
  --color-text-faint: #7b8496;

  --color-accent-contrast: #ffffff;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.08);
  --shadow-md: 0 4px 16px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);

  --color-glow: rgba(59, 130, 246, 0.08);
  --color-grid-line: rgba(16, 24, 40, 0.03);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --color-bg: #f4f6fb;
    --color-bg-elevated: #ffffff;
    --color-surface: #ffffff;
    --color-surface-hover: #eef1f8;
    --color-border: #dde3ef;
    --color-border-strong: #c7cfe0;

    --color-text: #101828;
    --color-text-muted: #4b5468;
    --color-text-faint: #7b8496;

    --color-accent-contrast: #ffffff;

    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.08);
    --shadow-md: 0 4px 16px rgba(16, 24, 40, 0.08);
    --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);

    --color-glow: rgba(59, 130, 246, 0.08);
    --color-grid-line: rgba(16, 24, 40, 0.03);
  }
}