/* ============================================================================
   tokens.css — Fuente única de verdad visual (Emprende Galápagos)
   DIRECCIÓN V2 "PUERTO CLARO" (recursos/diseno/direccion-v2.md)
   Fondo arena claro + tinta marina. El oscuro (--noche) queda SOLO para la
   vitrina de demos y el footer. No redeclarar estos tokens en otros archivos.

   COMPATIBILIDAD: los nombres antiguos (--navy, --ink, --muted, --line, --card…)
   se conservan como alias remapeados a la paleta clara. Ver tabla al final.
   ========================================================================== */

:root {
  /* breakpoints: 375px móvil base, 768px tablet, 1440px desktop */
  --bp-tablet: 768px;
  --bp-desktop: 1440px;

  /* ===== Paleta V2 — Puerto Claro ===== */
  --arena: #FAF7F1;        /* fondo base: hueso cálido, luz de puerto */
  --arena-2: #F3EDE2;      /* arena más tostada (paneles alternos) */
  --blanco: #FFFFFF;       /* superficies (cards) */
  --tinta: #0B2440;        /* texto principal: azul-negro marino */
  --tinta-suave: #46617E;  /* texto secundario sobre claro (AA) */
  --linea: #E8E1D6;        /* bordes: arena tostada, no gris frío */

  /* Acción (el ADN azul se conserva) */
  --azul: #2563EB;
  --azul-d: #1D4ED8;

  /* Verde Galápagos: acento de MARCA (wordmark "Galápagos" y resaltados).
     --verde para luz clara; --verde-claro sobre fondos oscuros;
     --verde-tinta cuando el verde debe ser TEXTO pequeño legible (AA). */
  --verde: #10A35A;
  --verde-claro: #4ADE80;
  --verde-tinta: #0B7A42;

  /* Coral: SOLO badges "Nuevo", resaltes de oferta y micro-energía.
     Como fondo de badge lleva texto oscuro (--coral-tinta-sobre). Cuentagotas. */
  --coral: #FF6B4A;
  --coral-tinta: #C2410C;        /* coral utilizable como texto pequeño sobre claro */
  --coral-tinta-sobre: #3D1206;  /* texto oscuro sobre fondo coral */
  --coral-suave: #FFF1EC;        /* tinte de fondo para bandas de oferta */

  /* Esmeralda: RESERVADA EXCLUSIVAMENTE para el plan Combo Completo.
     --esmeralda-tinta = esmeralda legible como texto pequeño sobre claro. */
  --esmeralda: #10B981;
  --esmeralda-tinta: #067A52;

  /* Bloque oscuro: vitrina de demos + footer. NO es el fondo base. */
  --noche: #0A1D33;
  --noche-2: #14304F;

  /* WhatsApp: solo para botones/enlaces de WhatsApp. */
  --whatsapp: #25D366;

  /* ===== Alias de compatibilidad (nombres antiguos → paleta V2) =====
     Páginas aún no re-pieladas siguen funcionando con estos nombres. */
  --navy: var(--noche);          /* antes #0A1628 fondo oscuro; hoy = tinta oscura/bloques noche */
  --navy-2: var(--noche-2);
  --ink: var(--tinta);           /* antes texto claro sobre oscuro; hoy texto oscuro sobre claro */
  --muted: var(--tinta-suave);
  --line: var(--linea);
  --card: var(--blanco);

  /* ===== Estados (utilitarios, admin/toasts) ===== */
  --ok: #16A34A;
  --ok-bg: rgba(22, 163, 74, 0.12);
  --warn: #B45309;
  --warn-bg: rgba(180, 83, 9, 0.12);
  --bad: #DC2626;
  --bad-bg: rgba(220, 38, 38, 0.10);

  /* ===== Gradiente de marca (bloques noche: vitrina/footer) ===== */
  --grad-marca: linear-gradient(165deg, var(--noche) 0%, var(--noche-2) 100%);

  /* ===== Tipografía =====
     Display: Bricolage Grotesque 500/700/800 (Google Fonts, cargar en <link>).
     Poppins queda de fallback para páginas aún no migradas. */
  --font-display: 'Bricolage Grotesque', 'Poppins', system-ui, sans-serif;
  --font-texto: 'Inter', system-ui, sans-serif;

  --fs-h1: clamp(2rem, 1.35rem + 2.8vw, 3.4rem);
  --fs-h2: clamp(1.5rem, 1.15rem + 1.5vw, 2.4rem);
  --fs-h3: clamp(1.15rem, 0.98rem + 0.75vw, 1.5rem);
  --fs-body: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  --fs-small: clamp(0.8rem, 0.77rem + 0.12vw, 0.875rem);

  /* ===== Espaciado (escala 4/8/12/16/24/32) ===== */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* ===== Radios (V2: 16px cards / 12px controles) ===== */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-full: 999px;

  /* ===== Sombras cálidas (tinta marina, nunca negro frío) ===== */
  --shadow-sm: 0 1px 3px rgba(11, 36, 64, 0.08);
  --shadow-md: 0 10px 30px rgba(11, 36, 64, 0.08);
  --shadow-lg: 0 24px 56px rgba(11, 36, 64, 0.14);

  --glow-azul: 0 0 24px rgba(37, 99, 235, 0.18);
  /* Glow esmeralda: solo para elementos del plan Combo Completo. */
  --glow-esmeralda: 0 0 24px rgba(16, 185, 129, 0.20);

  /* ===== Transiciones ===== */
  --transicion-rapida: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transicion-suave: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   TABLA DE ALIAS (para agentes re-pielando otras páginas):
   --navy  → var(--noche)  #0A1D33 (ya no es fondo base; úsalo solo como tinta
             oscura o bloques noche; para fondo de página usa --arena)
   --navy-2→ var(--noche-2) #14304F
   --ink   → var(--tinta)  #0B2440 (texto principal sobre claro; dentro de
             .bg-noche y .footer site.css lo re-scopa a claro automáticamente)
   --muted → var(--tinta-suave) #46617E
   --line  → var(--linea)  #E8E1D6
   --card  → var(--blanco) #FFFFFF
   --verde → ahora #10A35A (profundo, para luz clara); el antiguo #4ADE80
             vive en --verde-claro (solo sobre fondos oscuros);
             texto pequeño verde → --verde-tinta #0B7A42
   NUEVOS: --arena --arena-2 --blanco --tinta --tinta-suave --linea --coral
           --coral-tinta --coral-tinta-sobre --coral-suave --esmeralda-tinta
           --noche --noche-2 --verde-claro --verde-tinta
   ========================================================================== */