/* Design tokens — única fuente de colores, fuentes, espaciados y movimiento. */
:root {
  /* Superficies */
  --color-bg: #0B0F1A;
  --color-surface: #121A2B;
  --color-surface-raised: #17213A;
  --color-border: #1F2A44;
  --color-border-strong: #2C3B5E;
  --color-grid: rgba(56, 189, 248, 0.045);
  --color-overlay: rgba(5, 8, 15, 0.72);

  /* Marca */
  --color-primary: #38BDF8;
  --color-primary-soft: rgba(56, 189, 248, 0.08);
  --color-primary-ring: rgba(56, 189, 248, 0.45);
  --color-accent: #FF6B35;
  --color-accent-hover: #FF8257;
  --color-on-accent: #0B0F1A;

  /* Telemetría */
  --color-ok: #22C55E;
  --color-warn: #F59E0B;
  --color-crit: #EF4444;
  --color-off: #2C3B5E;

  /* Texto */
  --color-text: #E2E8F0;
  --color-text-muted: #94A3B8;
  --color-text-faint: #8391A7;

  /* Tipografía */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.9375rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --tracking-wide: 0.08em;

  /* Espaciado (base 4px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  --grid-size: 32px;
  --column-width: 240px;
  --topbar-height: 64px;

  /* Formas */
  --radius-card: 6px;
  --radius-sm: 4px;
  --radius-pill: 999px;

  /* Elevación */
  --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.25);
  --shadow-lift: 0 12px 24px rgba(0, 0, 0, 0.45);
  --glow-primary: 0 0 0 1px var(--color-primary-ring), 0 0 18px rgba(56, 189, 248, 0.28);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.6);

  /* Movimiento (máximo 200ms) */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
  }
}