/* ==========================================================================
   TOKENS — única fuente de verdad del sistema visual.
   Ningún componente declara hex ni px de color: todo sale de aquí.

   Tema: tres estados.
     · sin atributo        → sigue al sistema operativo (prefers-color-scheme)
     · [data-theme=light]  → claro forzado
     · [data-theme=dark]   → oscuro forzado
   ========================================================================== */

:root {
  /* --- Marca --- */
  --navy: #1B2F6B;
  --blue: #1F55D6;
  --azure: #0EA5E9;
  --teal: #14B8A6;
  --mint: #2DD4A0;
  --amber: #F5A524;
  --red: #EF4444;

  /* --- Superficies y tinta (tema claro) --- */
  --bg: #FFFFFF;
  --bg2: #F3F6FB;
  --bg3: #E9EFF9;
  --card: #FFFFFF;
  --ink: #0F1B3F;
  --text: #14213D;
  --muted: #5B6B8A;
  --border: #DDE4F0;

  /* Tinta del logotipo: cambia con el tema, el isotipo no. */
  --logo-ink: var(--navy);

  /* Acentos cuando son TEXTO. Los de marca (--blue, --azure) se reservan para
     rellenos y bordes: sobre blanco no llegan a 4.5:1 y sobre el fondo oscuro
     se apagan. Estos dos sí cumplen AA en ambos temas. */
  --blue-txt: #1F55D6;    /* 6.3:1 sobre blanco */
  --azure-txt: #0A7BAD;   /* 4.7:1 sobre blanco */
  --teal-txt: #0F766E;    /* 5.5:1 sobre blanco */
  --rojo-txt: #DC2626;

  /* --- Degradados --- */
  --grad: linear-gradient(120deg, #1B2F6B 0%, #1F55D6 35%, #0EA5E9 70%, #2DD4A0 100%);
  --grad-soft: linear-gradient(120deg, #1F55D6, #14B8A6);

  /* --- Sombras --- */
  --sh-primary: 0 10px 24px rgba(31, 85, 214, .28);
  --sh-card: 0 30px 60px rgba(27, 47, 107, .28);
  --sh-plan: 0 20px 40px rgba(31, 85, 214, .12);
  --sh-md: 0 8px 24px rgba(15, 27, 63, .10);

  /* --- Sobre fondo oscuro fijo (.sim, footer, .upsell): no dependen del tema --- */
  --on-dark-text: #FFFFFF;
  --on-dark-muted: #B7C3E3;
  --on-dark-faint: #9AA8C7;
  --on-dark-legal: #7E8CB0;
  --on-dark-line: rgba(255, 255, 255, .1);
  --on-dark-line-2: rgba(255, 255, 255, .18);
  --on-dark-fill: rgba(255, 255, 255, .05);
  --on-dark-fill-2: rgba(255, 255, 255, .08);
  --on-dark-fill-3: rgba(255, 255, 255, .14);

  /* --- Geometría --- */
  --r: 18px;
  --rs: 12px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* --- Espaciado --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* --- Tipografía --- */
  --font-d: 'Space Grotesk', 'Archivo', system-ui, sans-serif;
  --font-b: 'Inter', system-ui, sans-serif;

  /* --- Cromo de la interfaz --- */
  --header-h: 64px;
  --bnav-h: 70px;
}

/* --------------------------------------------------------------------------
   Tema oscuro. Se declara una vez en un @custom-selector artesanal: la misma
   lista de tokens aplicada a los dos selectores que activan el oscuro.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D1530;
    --bg2: #141E3D;
    --bg3: #1B274C;
    --card: #141E3D;
    --ink: #0A1128;
    --text: #E8EDF7;
    --muted: #9AA8C7;
    --border: #26335A;
    --logo-ink: #FFFFFF;
    --blue-txt: #5B8DEF;    /* 5.6:1 sobre el fondo oscuro */
    --azure-txt: #38BDF8;
    --teal-txt: #2DD4A0;
    --rojo-txt: #F87171;
    --sh-primary: 0 10px 24px rgba(0, 0, 0, .45);
    --sh-card: 0 30px 60px rgba(0, 0, 0, .5);
    --sh-plan: 0 20px 40px rgba(0, 0, 0, .35);
    --sh-md: 0 8px 24px rgba(0, 0, 0, .35);
  }
}

:root[data-theme="dark"] {
  --bg: #0D1530;
  --bg2: #141E3D;
  --bg3: #1B274C;
  --card: #141E3D;
  --ink: #0A1128;
  --text: #E8EDF7;
  --muted: #9AA8C7;
  --border: #26335A;
  --logo-ink: #FFFFFF;
  --blue-txt: #5B8DEF;    /* 5.6:1 sobre el fondo oscuro */
  --azure-txt: #38BDF8;
  --teal-txt: #2DD4A0;
  --rojo-txt: #F87171;
  --sh-primary: 0 10px 24px rgba(0, 0, 0, .45);
  --sh-card: 0 30px 60px rgba(0, 0, 0, .5);
  --sh-plan: 0 20px 40px rgba(0, 0, 0, .35);
  --sh-md: 0 8px 24px rgba(0, 0, 0, .35);
}

/* El navegador pinta formularios y barras de scroll acorde al tema activo. */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }