/* ─────────────────────────────────────────────────────────────
   Design tokens — Orbit Deck
   A control-room palette: near-black space, four signal colors
   borrowed one-per-card from the services themselves.
   ───────────────────────────────────────────────────────────── */

:root {
  color-scheme: dark;

  /* Surfaces */
  --bg: #0a0e17;
  --bg-grid-line: rgba(255, 255, 255, 0.035);
  --panel: #10151f;
  --panel-raised: #161d2b;
  --panel-hover: #1b2333;
  --border: #232c40;
  --border-soft: #1a2233;

  /* Text */
  --text-primary: #edeff5;
  --text-secondary: #a7afc4;
  --text-muted: #64708a;

  /* Signal colors — one per service, used sparingly */
  --amber: #f5a623;
  --amber-dim: rgba(245, 166, 35, 0.14);
  --teal: #45d6c0;
  --teal-dim: rgba(69, 214, 192, 0.14);
  --violet: #9b8cff;
  --violet-dim: rgba(155, 140, 255, 0.14);
  --coral: #ff8a68;
  --coral-dim: rgba(255, 138, 104, 0.14);

  /* Status */
  --status-online: #3ddc97;
  --status-offline: #ef5b5b;
  --status-checking: #64708a;

  /* Type */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* Scale */
  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.85rem);
  --step-0: clamp(0.95rem, 0.92rem + 0.15vw, 1rem);
  --step-1: clamp(1.1rem, 1.05rem + 0.25vw, 1.25rem);
  --step-2: clamp(1.4rem, 1.3rem + 0.5vw, 1.75rem);
  --step-3: clamp(2rem, 1.7rem + 1.2vw, 3rem);

  /* Spacing */
  --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: 4.5rem;

  /* Radius / shadow */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 20px 40px -20px rgba(0, 0, 0, 0.6);
  --shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 30px 60px -20px rgba(0, 0, 0, 0.75);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-med: 320ms;
}

body[data-theme="light"] {
  color-scheme: light;

  --bg: #edf3fb;
  --bg-grid-line: rgba(15, 23, 42, 0.06);
  --panel: #ffffff;
  --panel-raised: #f4f8ff;
  --panel-hover: #edf4ff;
  --border: #d6dfef;
  --border-soft: #e7edf8;

  --text-primary: #111827;
  --text-secondary: #475569;
  --text-muted: #66758d;

  --amber: #d97706;
  --amber-dim: rgba(217, 119, 6, 0.12);
  --teal: #0f9f9a;
  --teal-dim: rgba(15, 159, 154, 0.12);
  --violet: #6f5af5;
  --violet-dim: rgba(111, 90, 245, 0.12);
  --coral: #ea6a4d;
  --coral-dim: rgba(234, 106, 77, 0.12);

  --status-online: #1fa76b;
  --status-offline: #d94a45;
  --status-checking: #7c8aa5;

  --shadow-card: 0 1px 0 rgba(15, 23, 42, 0.04) inset,
    0 18px 34px -22px rgba(15, 23, 42, 0.25);
  --shadow-lift: 0 1px 0 rgba(15, 23, 42, 0.04) inset,
    0 26px 48px -20px rgba(15, 23, 42, 0.3);
}