/* ============================================================
   AlphaNetworks · Design System
   variables.css — Tokens de diseño (única fuente de verdad)
   ------------------------------------------------------------
   Consolidación del avance visual existente (styles.css v12).
   Tema: 100% dark · Sora + Inter · Acento #00B8D9
   IMPORTANTE: no cambiar valores de marca sin revisar identidad.
   Los nombres de tokens preexistentes se conservan para que el
   CSS legacy y el nuevo sistema modular puedan coexistir durante
   la migración.
   ============================================================ */

:root {

  /* ── Marca / Acento ─────────────────────────────────────── */
  --cyan:      #00B8D9;            /* acento principal: CTA, enlaces, datos */
  --cyan-hi:   #33C9E6;            /* hover / estado activo */
  --cyan-dim:  rgba(0,184,217,.15);/* fondos sutiles, chips, iconos */
  --cyan-soft: rgba(0,184,217,.10);

  /* ── Colores de estado / secundarios ────────────────────── */
  --green:  #22C55E;
  --blue:   #3B82F6;
  --yellow: #EAB308;
  --orange: #F97316;
  --red:    #EF4444;
  --purple: #7C3AED;

  /* ── Fondos ─────────────────────────────────────────────── */
  --bg:       #071426;   /* fondo base de la página */
  --bg-card:  #0D223A;   /* superficie de tarjetas */
  --bg-surf:  #10243B;   /* superficie elevada / inputs */
  --bg-deep:  #050E1C;   /* footer / zonas profundas */

  /* ── Bordes ─────────────────────────────────────────────── */
  --border:    #1F3857;
  --border-hi: #315C7A;

  /* ── Texto ──────────────────────────────────────────────── */
  --text:     #F4F8FF;   /* texto principal */
  --muted:    #B3C8E0;   /* secundario (alto contraste) */
  --muted-2:  #93AEC9;   /* terciario */
  --dim:      #6B83A5;   /* metadatos / deshabilitado */

  /* ── Tipografía ─────────────────────────────────────────── */
  --font-heading: 'Nunito', 'Nunito', system-ui, sans-serif;
  --font-body:    'Nunito', 'Segoe UI', Arial, sans-serif;

  /* Escala de tamaños (rem · base 16px) */
  --fs-xs:   .75rem;    /* 12 */
  --fs-sm:   .875rem;   /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md:   1.125rem;  /* 18 */
  --fs-lg:   1.25rem;   /* 20 */
  --fs-xl:   1.5rem;    /* 24 */
  --fs-2xl:  2rem;      /* 32 */
  --fs-3xl:  2.5rem;    /* 40 */

  /* Títulos fluidos (preservados del diseño existente) */
  --fs-h1: clamp(2.1rem, 3.6vw, 3.1rem);
  --fs-h2: clamp(1.7rem, 2.6vw, 2.4rem);
  --fs-h3: clamp(1.25rem, 1.6vw, 1.5rem);

  /* Pesos */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  /* Interlineado */
  --lh-tight: 1.15;
  --lh-base:  1.6;
  --lh-loose: 1.7;

  /* ── Espaciado (escala base 4px) ────────────────────────── */
  --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;
  --space-20:  80px;
  --space-24:  96px;
  --section-y: 88px;     /* padding vertical de secciones (.sec) */

  /* ── Radios ─────────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   18px;
  --radius-full: 100px;  /* botones / pills */

  /* ── Sombras ────────────────────────────────────────────── */
  --shadow-sm:    0 8px 28px rgba(0,0,0,.28);
  --shadow:       0 18px 50px rgba(0,0,0,.35);
  --shadow-brand: 0 8px 24px rgba(0,184,217,.15);

  /* ── Layout / contenedor ────────────────────────────────── */
  --maxw:       1320px;              /* contenedor estándar */
  --maxw-fluid: min(1480px, 92vw);   /* contenedor fluido widescreen */
  --container-pad: 28px;

  /* ── Z-index (escala) ───────────────────────────────────── */
  --z-base:     1;
  --z-dropdown: 20;
  --z-sticky:   50;     /* header.nav */
  --z-overlay:  100;
  --z-modal:    1000;
  --z-toast:    2000;   /* skip-link, notificaciones */

  /* ── Transiciones ───────────────────────────────────────── */
  --ease:            cubic-bezier(.2,.7,.2,1);
  --transition-fast: .2s ease;
  --transition:      .3s ease;
  --transition-slow: .65s var(--ease);

  /* ── Gradientes de marca ────────────────────────────────── */
  --grad-body:
    radial-gradient(ellipse 900px 500px at 88% 0%, rgba(0,184,217,.13) 0%, transparent 55%),
    radial-gradient(ellipse 700px 600px at 4% 90%, rgba(14,100,180,.10) 0%, transparent 50%),
    var(--bg);
  --grad-card: linear-gradient(180deg, var(--bg-card), var(--bg-surf));
  --grad-cta:  linear-gradient(135deg, #0B1D38, #071426);
}

/* ============================================================
   BREAKPOINTS (referencia)
   Las media queries NO aceptan variables CSS. Mantener estos
   valores sincronizados manualmente en responsive.css:
     sm  → 560px   (móvil grande)
     md  → 680px   (phablet)
     lg  → 960px   (tablet)
     xl  → 1080px  (desktop / colapso de nav)
     2xl → 1600px  (widescreen)
     3xl → 1900px  (ultra-wide)
   ============================================================ */