/* ══════════════════════════════════════════════════════════════
   MY DATTA · TOKENS
   Valores tomados del Brand Manual v1.0 (mydatta.com/brandbook).
   Si hay que retocar la identidad se retoca aquí y el sitio entero
   se entera. Nada de valores sueltos repetidos por las hojas.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── Primarios (brandbook 02) ── */
  --azul:        #2563EB;   /* Datta Blue · acción, marca, CTA */
  --azul-claro:  #3B7DF0;
  --azul-hondo:  #1D4ED8;
  --tinta:       #0F172A;   /* Datta Navy · texto y autoridad */
  --tinta-suave: #1E293B;
  --blanco:      #FFFFFF;   /* Neutro base */

  /* ── Acento (brandbook 02) ──
     Growth Green: métricas positivas, éxito, KPIs en crecimiento.
     Soft Mint: chips, tags, badges y fondos de cards informativas.
     No son decoración: el manual les asigna el 6% y el 4% del uso. */
  --verde:       #22C55E;
  --verde-hondo: #15803D;   /* verde legible sobre menta y sobre blanco */
  --menta:       #A7F3D0;
  --menta-clara: #E2F5EC;

  /* ── Apoyo (brandbook 02) ── */
  --azul-luz:    #EFF4FF;   /* Blue Light */
  --azul-medio:  #93B4F8;   /* Blue Mid */
  --off-white:   #F8FAFF;   /* Off White */
  --cian-datto:  #67E8F9;   /* pantalla y glow de Datto (brandbook 06) */

  /* ── Superficies ── */
  --papel:       #FFFFFF;
  --fondo:       #FFFFFF;
  --nieve:       #F8FAFF;   /* bandas alternas = Off White */
  --hielo:       #EFF4FF;   /* cajas destacadas = Blue Light */
  --linea:       #DDE6F8;

  /* ── Texto ── */
  --texto:       #0F172A;
  --texto-2:     #2D4070;
  --texto-3:     #586D91;   /* 5.2:1 sobre blanco · cumple AA */

  /* Superficie oscura SIEMPRE, en los dos temas: franja, pie y bloque
     de cierre. Va aparte de --tinta a propósito, porque --tinta es color
     de TEXTO y en modo oscuro se aclara: usarlo de fondo dejaba esos
     bloques blancos sobre blanco. */
  --superficie-oscura: #0F172A;
  --sobre-oscura:      #FFFFFF;
  --sobre-oscura-2:    rgba(255, 255, 255, .72);
  --sobre-oscura-3:    rgba(255, 255, 255, .45);
  --linea-oscura:      rgba(255, 255, 255, .14);

  --error:       #EF4444;

  /* ── Degradados y sombras ── */
  --degradado-azul: linear-gradient(180deg, #3B7DF0 0%, #2563EB 52%, #1D4ED8 100%);
  /* "Degradado profundo · Blue → Navy" del brandbook 07, para cierres */
  --degradado-hondo: radial-gradient(ellipse at 60% -20%, rgba(37, 99, 235, .42) 0%, transparent 64%);
  --sombra-baja:  0 2px 14px rgba(15, 23, 42, .05);
  --sombra:       0 16px 34px rgba(15, 23, 42, .08);
  --sombra-alta:  0 24px 54px rgba(15, 23, 42, .12);
  --sombra-azul:  0 10px 26px rgba(37, 99, 235, .26);

  /* ── Geometría · radio 2px en iconografía, suave en superficies ── */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* ── Espaciado (brandbook 04) · escala de 8 ── */
  --e-xs: 8px;  --e-s: 16px;  --e-m: 24px;  --e-l: 32px;
  --e-xl: 48px; --e-2xl: 64px; --e-3xl: 80px; --e-4xl: 120px;
  --seccion: clamp(48px, 7vw, 80px);   /* 2XL a 3XL */
  --ancho: 1180px;

  /* ── Tipografía (brandbook 03) ──
     Poppins en 300 · 400 · 600 · 700 · 800.
     Display 96/800 · H1 60/700 · H2 40/700 · H3 24/600
     Body 16/400 · Caption 13/300 */
  --fuente: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-et: ui-monospace, 'SFMono-Regular', 'Roboto Mono', monospace;

  --curva: cubic-bezier(.22, 1, .36, 1);
  --alto-header: 76px;
}

/* ══════════════════════════════════════════════════════════════
   MODO OSCURO
   Solo se redefinen los tokens; ninguna regla de componente
   necesita saber en qué tema está.
   ══════════════════════════════════════════════════════════════ */
html[data-tema="oscuro"] {
  --papel:       #111B2D;
  --fondo:       #0B1220;
  --nieve:       #0E1727;
  --hielo:       #16233A;
  --linea:       #283650;

  --texto:       #EDF3FF;
  --texto-2:     #C2D0E6;
  --texto-3:     #91A0B7;
  --tinta:       #EDF3FF;
  --tinta-suave: #C2D0E6;

  /* Sobre fondo oscuro la menta pasa a ser el trazo, no el relleno */
  --menta:       #17352C;
  --menta-clara: #14291F;
  --verde-hondo: #6EE7A8;

  --superficie-oscura: #0A1120;
  --error:       #FF8A8A;

  --sombra-baja: 0 2px 14px rgba(0, 0, 0, .22);
  --sombra:      0 18px 45px rgba(0, 0, 0, .28);
  --sombra-alta: 0 26px 60px rgba(0, 0, 0, .34);
}

@media (prefers-reduced-motion: reduce) {
  :root { --curva: linear; }
}