/* ═══════════════════════════════════════════════════════════════════════════
   DevRoute — theme.css
   Fuente única de verdad para toda la plataforma.

   Inspirado en Airalo: azul vibrante + teal, fondos oscuros neutros
   (sin tinte morado), tipografía limpia.

   Para cambiar la apariencia de TODA la plataforma, edita solo este archivo.
   ─────────────────────────────────────────────────────────────────────────
   CAMBIOS RÁPIDOS:
     Color de fondo      → --bg
     Color de acento     → --brand
     Color secundario    → --brand-2
     Fuente              → --font-sans
═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;0,14..32,900;1,14..32,400&display=swap');

:root {

  /* ── Tipografía ─────────────────────────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* ── Fondos — oscuro neutro (sin tinte morado, estilo Airalo dark) ────────── */
  --bg:        #06080f;   /* fondo de página              */
  --surface:   #0c0e1a;   /* tarjetas / paneles           */
  --surface-2: #111422;   /* elementos anidados           */
  --surface-3: #171b2e;   /* hover / estado activo        */

  /* ── Bordes ─────────────────────────────────────────────────────────────── */
  --border:      rgba(255,255,255,0.07);
  --border-mid:  rgba(255,255,255,0.11);
  --border-soft: rgba(255,255,255,0.04);

  /* ── Texto ──────────────────────────────────────────────────────────────── */
  --text:           #eef0ff;
  --text-primary:   #eef0ff;
  --text-secondary: #8b92b8;
  --text-muted:     #8b92b8;
  --text-dim:       #363a56;

  /* ── Marca — azul Airalo + teal ──────────────────────────────────────────── */
  --brand:   #1d7ef8;   /* azul principal (Airalo blue)  */
  --brand-2: #00c2cb;   /* teal secundario               */

  /* ── Paleta semántica ────────────────────────────────────────────────────── */
  --green:  #10b981;
  --red:    #f43f5e;
  --blue:   #1d7ef8;
  --indigo: #4f6ef7;
  --purple: #818cf8;
  --yellow: #f59e0b;
  --cyan:   #22d3ee;
  --teal:   #00c2cb;
  --orange: #fb923c;

  /* ── Colores de estado ───────────────────────────────────────────────────── */
  --color-success: #10b981;
  --color-error:   #f43f5e;
  --color-warning: #f59e0b;
  --color-info:    #1d7ef8;

  /* ── Gradientes — azul a teal (firma visual de Airalo) ───────────────────── */
  --gradient:      linear-gradient(135deg, #1d7ef8 0%, #00c2cb 100%);
  --gradient-btn:  linear-gradient(135deg, #1d7ef8 0%, #1565c8 100%);
  --gradient-text: linear-gradient(135deg, #60b0ff 0%, #00e5f0 100%);
  --gradient-teal: linear-gradient(135deg, #00c2cb 0%, #1d7ef8 100%);

  /* ── Radio de borde — ligeramente más redondeado que antes ───────────────── */
  --radius-xs:   6px;
  --radius-sm:  10px;
  --radius:     16px;
  --radius-lg:  22px;
  --radius-full: 9999px;

  /* ── Sombras ─────────────────────────────────────────────────────────────── */
  --shadow-sm:   0 1px 4px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  --shadow:      0 4px 20px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35);
  --shadow-lg:   0 24px 64px rgba(0,0,0,.7), 0 8px 24px rgba(0,0,0,.5);
  --shadow-glow: 0 0 50px rgba(29,126,248,0.18), 0 0 100px rgba(0,194,203,0.1);

  /* ── Escala tipográfica ──────────────────────────────────────────────────── */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  22px;
  --text-3xl:  28px;
  --text-4xl:  36px;
  --text-5xl:  48px;

  /* ── Pesos tipográficos ──────────────────────────────────────────────────── */
  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  /* ── Espaciado ───────────────────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Transiciones ────────────────────────────────────────────────────────── */
  --transition:    0.2s ease;
  --transition-sm: 0.15s ease;
  --transition-lg: 0.3s ease;

  /* ── Z-index ─────────────────────────────────────────────────────────────── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-modal:    200;
  --z-toast:    300;
  --z-overlay:  400;
}