/* ==========================================================================
   ESCALO — Tokens de color
   --------------------------------------------------------------------------
   Arquitectura de 2 capas: primitivos (la paleta cruda, no usar en componentes)
   -> semanticos (lo unico que se referencia desde el codigo).

   LEY DEL SISTEMA
   ---------------
   En superficie clara manda el VIOLETA. En superficie oscura manda el LIMA.
   No es una preferencia estetica: el violeta #6E56CF sobre tinta #16121F da
   3.42:1 y sobre violeta profundo #2E2464 da 2.51:1 — ambos reprueban WCAG AA
   para texto normal. Ver 02-color/paleta.md para la tabla completa.
   ========================================================================== */

:root {
  /* ---------- Primitivos (paleta de marca) ---------- */
  --escalo-violeta:          #6E56CF;
  --escalo-violeta-claro:    #9A89DD; /* derivado: violeta 30% -> blanco. Unico violeta legible sobre oscuro */
  --escalo-violeta-profundo: #2E2464;
  --escalo-lavanda:          #EDEAFB;
  --escalo-lima:             #C6E63F;
  --escalo-tinta:            #16121F;
  --escalo-gris:             #726C82;
  --escalo-blanco:           #FFFFFF;

  /* Derivados de superficie (no son colores de marca nuevos, son mezclas) */
  --escalo-lavanda-suave:    #F7F5FD; /* lavanda al 40% sobre blanco */
  --escalo-tinta-elevada:    #211C2D; /* tinta +6% luz: cards sobre fondo tinta */
  --escalo-borde-claro:      #E7E4F3; /* separadores decorativos — NO para inputs */
  --escalo-borde-oscuro:     #322B44; /* idem, en oscuro */
  --escalo-borde-campo:      #8B85A0; /* 3.52:1 sobre blanco — WCAG 1.4.11 */
  --escalo-borde-campo-osc:  #726C82; /* 3.67:1 sobre tinta  — WCAG 1.4.11 */

  /* Canal (no es marca — es el color oficial de WhatsApp, no alterarlo) */
  --escalo-whatsapp:         #25D366;
}

/* ==========================================================================
   TEMA CLARO — secciones de conversion, formulario, contenido, FAQ
   ========================================================================== */
:root,
[data-tema="claro"] {
  --fondo:              var(--escalo-blanco);
  --fondo-alt:          var(--escalo-lavanda-suave);
  --fondo-realce:       var(--escalo-lavanda);
  --superficie:         var(--escalo-blanco);
  --borde:              var(--escalo-borde-claro);
  --borde-campo:        var(--escalo-borde-campo);  /* inputs, selects, checkbox */

  --texto:              var(--escalo-tinta);        /* 18.41:1 AAA */
  --texto-secundario:   var(--escalo-gris);         /*  5.02:1 AA  */
  --texto-marca:        var(--escalo-violeta);      /*  5.39:1 AA  */

  --accion:             var(--escalo-violeta);      /* CTA primario */
  --accion-hover:       #5B45B8;
  --sobre-accion:       var(--escalo-blanco);       /*  5.39:1 AA  */
  --accion-sutil:       var(--escalo-lavanda);      /* fondo de chips y badges */
  --sobre-accion-sutil: var(--escalo-violeta-profundo);

  /* El lima NO se usa como fondo de CTA en claro: lima sobre blanco = 1.42:1.
     Solo como subrayado, marcador o borde de 3px+ (elemento grafico, no texto). */
  --realce-grafico:     var(--escalo-lima);

  --foco:               var(--escalo-violeta);
  --sombra:             0 1px 2px rgb(22 18 31 / .06), 0 8px 24px rgb(22 18 31 / .06);
}

/* ==========================================================================
   TEMA OSCURO — hero, showcase del panel, cierre
   ========================================================================== */
[data-tema="oscuro"] {
  --fondo:              var(--escalo-tinta);
  --fondo-alt:          var(--escalo-violeta-profundo);
  --fondo-realce:       var(--escalo-tinta-elevada);
  --superficie:         var(--escalo-tinta-elevada);
  --borde:              var(--escalo-borde-oscuro);
  --borde-campo:        var(--escalo-borde-campo-osc);

  --texto:              var(--escalo-lavanda);      /* 15.58:1 AAA sobre tinta */
  --texto-secundario:   #A9A2BC;                    /*  7.30:1 AAA — NO usar --escalo-gris (3.67:1, reprueba) */
  --texto-marca:        var(--escalo-violeta-claro);/*  6.13:1 AA  — NO usar --escalo-violeta (3.42:1, reprueba) */

  --accion:             var(--escalo-lima);         /* CTA primario en oscuro */
  --accion-hover:       #D4F05C;
  --sobre-accion:       var(--escalo-tinta);        /* 12.97:1 AAA */
  --accion-sutil:       rgb(154 137 221 / .16);
  --sobre-accion-sutil: var(--escalo-violeta-claro);

  --realce-grafico:     var(--escalo-lima);

  --foco:               var(--escalo-lima);
  --sombra:             0 1px 2px rgb(0 0 0 / .4), 0 12px 32px rgb(0 0 0 / .35);
}

/* ==========================================================================
   Escala de espaciado — dial "spacious" (3/10) de ui-ux-pro-max, ritmo 4/8px
   ========================================================================== */
:root {
  --esp-1:  4px;
  --esp-2:  8px;
  --esp-3:  16px;
  --esp-4:  24px;
  --esp-5:  32px;
  --esp-6:  48px;
  --esp-7:  64px;
  --esp-8:  96px;

  --radio-sm: 8px;
  --radio-md: 12px;
  --radio-lg: 20px;
  --radio-full: 999px;

  --icono-sm: 16px;
  --icono-md: 20px;
  --icono-lg: 24px;
  --icono-trazo: 1.5;

  /* Motion — dial 4/10 "standard". Regla: entrar ease-out, salir ease-in,
     salida al 60-70% de la duracion de entrada. */
  --dur-rapida: 150ms;
  --dur-media:  250ms;
  --dur-salida: 160ms;
  --ease-entrada: cubic-bezier(.16, 1, .3, 1);
  --ease-salida:  cubic-bezier(.4, 0, 1, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-rapida: 1ms;
    --dur-media:  1ms;
    --dur-salida: 1ms;
  }
}