/* ────────────────────────────────────────────────────────────
 * aeroStations — Design tokens
 * Extraído de .claude/design/index.html (single source of truth).
 * Cualquier cambio de tokens debe originarse en Design.md y
 * sincronizarse a este archivo.
 * ──────────────────────────────────────────────────────────── */

:root {
  /* Acentos compartidos (dark + light) */
  --brand: #3aa3ff;
  --brand-deep: #1976d2;
  --brand-light: #7cc6ff;
  --alert: #ff6b3d;
  --alert-soft: rgba(255, 107, 61, 0.15);
  --success: #34d399;
  --success-soft: rgba(52, 211, 153, 0.18);
  --warning: #facc15;
  --info-soft: rgba(58, 163, 255, 0.18);
  --purple: #a78bfa;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Tipografía */
  --font: 'Inter', system-ui, sans-serif;

  /* Motion */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-mid: 320ms;
  --dur-slow: 600ms;
}

/* ═══════ DARK THEME (default) ═══════ */
[data-theme="dark"] {
  --bg: #0e1b2c;
  --surface: #152436;
  --surface-elevated: #1c2d42;
  --surface-muted: #1a2940;
  --on-bg: #ffffff;
  --on-bg-muted: #8a9bb0;
  --divider: rgba(255, 255, 255, 0.06);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
                 0 12px 36px rgba(0, 0, 0, 0.32);
  --shadow-fab: 0 12px 32px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  --hero-grad-top: #5fb0ff;
  --hero-grad-bot: #0d5cb6;
  --hero-inset: 0 1px 0 rgba(255, 255, 255, 0.18) inset,
                0 18px 40px rgba(0, 60, 140, 0.45);
  --grain-opacity: 0.025;
  --focus-ring: 0 0 0 3px rgba(58, 163, 255, 0.4);
}

/* ═══════ LIGHT THEME ═══════ */
[data-theme="light"] {
  --bg: #f5f8fb;
  --surface: #ffffff;
  --surface-elevated: #f9fbfd;
  --surface-muted: #eef3f8;
  --on-bg: #1a2940;
  --on-bg-muted: #6b7a90;
  --divider: rgba(26, 41, 64, 0.08);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 1) inset,
                 0 8px 24px rgba(26, 41, 64, 0.05);
  --shadow-fab: 0 12px 32px rgba(26, 41, 64, 0.1),
                0 0 0 1px rgba(26, 41, 64, 0.04) inset;
  --hero-grad-top: #7cc6ff;
  --hero-grad-bot: #1976d2;
  --hero-inset: 0 1px 0 rgba(255, 255, 255, 0.4) inset,
                0 18px 40px rgba(25, 118, 210, 0.25);
  --grain-opacity: 0.018;
  --focus-ring: 0 0 0 3px rgba(58, 163, 255, 0.35);
}