/* ================================================================
   INGESOLAR — Design Tokens v1.1 (DS Jamstack Edition)
   Fuente única de verdad. Importar ANTES de cualquier otro CSS.
   Estética: Soft/Fintech — sombras difusas, radio amplio, crema cálida.
   ================================================================ */

:root {

  /* ─── Neutros oscuros ──────────────────────────────────────── */
  --color-black:   #0A0A0A;   /* navbar, bloque de impacto, footer */
  --color-black-2: #111111;   /* superficies oscuras anidadas */
  --color-black-3: #1A1A1A;   /* card-dark hover, divisores */
  --color-black-4: #252525;   /* superficies oscuras de mayor nivel */

  /* ─── Solar — energía y acción ─────────────────────────────── */
  --color-solar:        #F5C03A;
  --color-solar-dark:   #D9A62E;
  --color-solar-soft:   rgba(245, 192, 58, 0.12);
  --color-solar-soft-2: rgba(245, 192, 58, 0.06);
  --color-solar-border: rgba(245, 192, 58, 0.35);
  --color-solar-glow:   rgba(245, 192, 58, 0.25);

  /* ─── Verde — sostenibilidad y validación ───────────────────── */
  --color-green:      #4E9A57;
  --color-green-soft: #EAF5EC;

  /* ─── Claros — crema cálida dominante ──────────────────────── */
  --color-white:    #FFFFFF;
  --color-cream:    #F7F6F2;   /* fondo principal de marca */
  --color-cream-2:  #EEECE7;   /* cream más profundo — hovers, separadores */
  --color-bg:       #F7F6F2;   /* alias semántico */
  --color-bg-warm:  #F7F6F2;

  /* ─── Bordes — sutiles, estilo fintech ─────────────────────── */
  --color-border:       rgba(10, 10, 10, 0.10);
  --color-border-light: rgba(10, 10, 10, 0.06);
  --color-border-dark:  rgba(10, 10, 10, 0.20);   /* énfasis en fondos claros */

  /* ─── Texto ─────────────────────────────────────────────────── */
  --color-text-base:    #0A0A0A;
  --color-text:         #0A0A0A;   /* alias heredado */
  --color-text-muted:   #6E6D67;
  --color-text-on-dark: #AEADA7;

  /* ─── Estados semánticos ────────────────────────────────────── */
  --color-success:        #4E9A57;
  --color-warning:        #B45309;
  --color-warning-soft:   rgba(181, 83, 9, 0.07);
  --color-warning-border: rgba(181, 83, 9, 0.22);
  --color-error:          #D94040;
  --color-info:           #3B82F6;
  
  /* ─── Comunicación ──────────────────────────────────────────── */
  --color-whatsapp:      #25D366;
  --color-whatsapp-dark: #1AAD53;

  /* ─── Tipografía: familias ──────────────────────────────────── */
  --font-display: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-body:    "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* ─── Tipografía: escala ────────────────────────────────────── */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-md:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  34px;
  --text-4xl:  44px;

  /* ─── Tipografía: line-height ───────────────────────────────── */
  --line-tight:   1.2;
  --line-normal:  1.5;
  --line-relaxed: 1.65;

  /* ─── Espaciado (múltiplos de 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;

  /* ─── Border radius — amplio, estilo fintech ────────────────── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;    /* cards principales */
  --radius-xl:   24px;    /* hero panels, modales */
  --radius-pill: 999px;

  /* ─── Sombras — difusas, atmosféricas ──────────────────────── */
  --shadow-xs:        0 1px 4px rgba(0, 0, 0, 0.05);
  --shadow-sm:        0 2px 8px rgba(0, 0, 0, 0.07);
  --shadow-md:        0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-soft:      0 8px 24px rgba(0, 0, 0, 0.12);   /* cards en reposo */
  --shadow-card:      0 8px 32px rgba(0, 0, 0, 0.12);   /* alias semántico */
  --shadow-md-hover:  0 8px 24px rgba(0, 0, 0, 0.15);   /* hover state */
  --shadow-dark:      0 12px 40px rgba(0, 0, 0, 0.22);  /* elevación máxima */
  --shadow-solar:     0 8px 24px rgba(245, 192, 58, 0.35); /* acento solar */
  --shadow-solar-sm:  0 4px 12px rgba(245, 192, 58, 0.25); /* acento solar suave */

  /* Aliases para compatibilidad con qa_foundation.html */
  --shadow-neo:       0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-neo-hover: 0 12px 32px rgba(0, 0, 0, 0.18);

  /* ─── Breakpoints ───────────────────────────────────────────── */
  --bp-sm: 440px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ─── Navbar ────────────────────────────────────────────────── */
  --nav-height: 72px;
  --nav-offset: 80px;
  --nav-z:      300;

  /* ─── Transiciones ──────────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 320ms ease;
}