/* ============================================================================
   TOKENS — Elecciones SEN
   Ver docs/09-sistema-diseno.md

   Ningún componente usa valores literales de color, tamaño o espaciado:
   todo pasa por estas variables. Es lo que permite que el modo oscuro
   funcione sin duplicar una sola regla.
   ========================================================================== */

:root {

  /* ── Marca ──────────────────────────────────────────────────────────────
     Escala construida sobre el naranja del logotipo de la SEN (#EB5305).  */
  --sen-50:  #fff4ed;
  --sen-100: #ffe6d5;
  --sen-200: #ffc9aa;
  --sen-300: #ffa274;
  --sen-400: #ff6f3c;
  --sen-500: #eb5305;   /* Color de marca */
  --sen-600: #dc3f04;
  --sen-700: #b62d06;
  --sen-800: #91250d;
  --sen-900: #75210e;

  /* ── Neutros ────────────────────────────────────────────────────────── */
  --n-0:   #ffffff;
  --n-25:  #fcfcfd;
  --n-50:  #f8f9fb;
  --n-100: #f1f3f6;
  --n-200: #e4e7ec;
  --n-300: #d0d5dd;
  --n-400: #98a2b3;
  --n-500: #667085;
  --n-600: #475467;
  --n-700: #344054;
  --n-800: #1d2939;
  --n-900: #101828;
  --n-950: #0c111d;

  /* ── Semánticos ─────────────────────────────────────────────────────────
     El ámbar de aviso se desplaza hacia el amarillo para no confundirse
     con el naranja de marca: en la pantalla de voto, un aviso tiene que
     leerse como aviso.                                                    */
  --exito-fondo:  #ecfdf3;
  --exito-borde:  #abefc6;
  --exito-texto:  #067647;
  --exito-fuerte: #039855;

  --error-fondo:  #fef3f2;
  --error-borde:  #fecdca;
  --error-texto:  #b42318;
  --error-fuerte: #d92d20;

  --aviso-fondo:  #fefbe8;
  --aviso-borde:  #feee95;
  --aviso-texto:  #854a0e;
  --aviso-fuerte: #ca8504;

  --info-fondo:   #eff8ff;
  --info-borde:   #b2ddff;
  --info-texto:   #175cd3;
  --info-fuerte:  #2e90fa;

  /* ── Roles semánticos · TEMA CLARO ──────────────────────────────────────
     Los componentes solo usan estos. Cambiar de tema es redefinirlos.     */
  --fondo:          var(--n-50);
  --fondo-sutil:    var(--n-100);
  --fondo-elevado:  var(--n-0);
  --fondo-inverso:  var(--n-900);

  --texto:          var(--n-900);
  --texto-suave:    var(--n-600);
  --texto-tenue:    var(--n-500);
  --texto-inverso:  var(--n-0);

  --borde:          var(--n-200);
  --borde-fuerte:   var(--n-300);

  --primario:        var(--sen-500);
  --primario-hover:  var(--sen-600);
  --primario-activo: var(--sen-700);
  --primario-suave:  var(--sen-50);
  --primario-borde:  var(--sen-200);
  --sobre-primario:  #ffffff;

  --foco: var(--sen-400);

  /* ── Tipografía ─────────────────────────────────────────────────────────
     Pila del sistema: carga instantánea, sin petición externa y aspecto
     nativo en cada plataforma.                                            */
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
            "Noto Sans", Arial, sans-serif;
  --fuente-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas,
                 "Liberation Mono", monospace;

  /* El cuerpo NUNCA baja de 16px: el censo tiene edad media alta.
     El sistema antiguo usaba 11px y generaba llamadas a secretaría. */
  --texto-xs:   0.8125rem;
  --texto-sm:   0.9375rem;
  --texto-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --texto-lg:   clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
  --texto-xl:   clamp(1.1875rem, 1.12rem + 0.35vw, 1.375rem);
  --texto-2xl:  clamp(1.375rem, 1.26rem + 0.55vw, 1.75rem);
  --texto-3xl:  clamp(1.625rem, 1.42rem + 1vw, 2.25rem);
  --texto-4xl:  clamp(2rem, 1.65rem + 1.7vw, 3rem);

  --peso-normal:   400;
  --peso-medio:    500;
  --peso-semi:     600;
  --peso-fuerte:   700;

  --interlineado-ajustado: 1.2;
  --interlineado:          1.6;
  --interlineado-amplio:   1.75;

  /* ── Espaciado (escala de 4px) ──────────────────────────────────────── */
  --e-1:  0.25rem;
  --e-2:  0.5rem;
  --e-3:  0.75rem;
  --e-4:  1rem;
  --e-5:  1.25rem;
  --e-6:  1.5rem;
  --e-8:  2rem;
  --e-10: 2.5rem;
  --e-12: 3rem;
  --e-16: 4rem;
  --e-20: 5rem;
  --e-24: 6rem;

  /* Espaciado fluido para secciones: crece con la ventana sin saltos. */
  --e-seccion: clamp(2rem, 1.4rem + 3vw, 4rem);

  /* ── Radios ─────────────────────────────────────────────────────────── */
  --radio-sm:   6px;
  --radio-md:   10px;
  --radio-lg:   14px;
  --radio-xl:   20px;
  --radio-full: 9999px;

  /* ── Sombras (muy suaves: la jerarquía la marca el borde) ───────────── */
  --sombra-sm: 0 1px 2px rgb(16 24 40 / 0.05);
  --sombra-md: 0 2px 4px -1px rgb(16 24 40 / 0.06),
               0 4px 12px -2px rgb(16 24 40 / 0.08);
  --sombra-lg: 0 4px 8px -2px rgb(16 24 40 / 0.08),
               0 12px 28px -4px rgb(16 24 40 / 0.10);
  --sombra-foco: 0 0 0 3px color-mix(in srgb, var(--foco) 45%, transparent);

  /* ── Movimiento ─────────────────────────────────────────────────────── */
  --transicion-rapida: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transicion:        180ms cubic-bezier(0.4, 0, 0.2, 1);
  --transicion-lenta:  260ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Estructura ─────────────────────────────────────────────────────── */
  --ancho-contenido:  1200px;
  --ancho-lectura:    68ch;   /* Longitud de línea cómoda para textos largos */
  --ancho-formulario: 34rem;
  --alto-cabecera:    4rem;
  --ancho-lateral:    17rem;

  --capa-cabecera: 100;
  --capa-cajon:    200;
  --capa-modal:    300;
}

/* ============================================================================
   TEMA OSCURO
   Se aplica por preferencia del sistema, salvo que se haya elegido el claro
   de forma explícita. Solo se redefinen roles: ningún componente cambia.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo:         var(--n-950);
    --fondo-sutil:   var(--n-900);
    --fondo-elevado: #131a26;
    --fondo-inverso: var(--n-50);

    --texto:         var(--n-50);
    --texto-suave:   var(--n-300);
    --texto-tenue:   var(--n-400);
    --texto-inverso: var(--n-900);

    --borde:        #232c3b;
    --borde-fuerte: #33405480;

    /* En oscuro se aclara la marca: el naranja intenso sobre fondo negro
       vibra y cansa la vista en lecturas largas. */
    --primario:        var(--sen-400);
    --primario-hover:  var(--sen-300);
    --primario-activo: var(--sen-200);
    --primario-suave:  #2a1508;
    --primario-borde:  #4d2410;
    --sobre-primario:  #1a0d04;

    --foco: var(--sen-300);

    --exito-fondo:  #052e1d;
    --exito-borde:  #085d3a;
    --exito-texto:  #75e0a7;
    --exito-fuerte: #47cd89;

    --error-fondo:  #37110f;
    --error-borde:  #7a271a;
    --error-texto:  #fda29b;
    --error-fuerte: #f97066;

    --aviso-fondo:  #2e2005;
    --aviso-borde:  #713b12;
    --aviso-texto:  #fde272;
    --aviso-fuerte: #fac515;

    --info-fondo:   #0b1c33;
    --info-borde:   #194185;
    --info-texto:   #84caff;
    --info-fuerte:  #53b1fd;

    --sombra-sm: 0 1px 2px rgb(0 0 0 / 0.35);
    --sombra-md: 0 2px 4px -1px rgb(0 0 0 / 0.4), 0 4px 12px -2px rgb(0 0 0 / 0.45);
    --sombra-lg: 0 4px 8px -2px rgb(0 0 0 / 0.45), 0 12px 28px -4px rgb(0 0 0 / 0.5);
  }
}

/* Elección explícita del usuario: gana sobre la preferencia del sistema. */
:root[data-tema="oscuro"] {
  --fondo:         var(--n-950);
  --fondo-sutil:   var(--n-900);
  --fondo-elevado: #131a26;
  --fondo-inverso: var(--n-50);

  --texto:         var(--n-50);
  --texto-suave:   var(--n-300);
  --texto-tenue:   var(--n-400);
  --texto-inverso: var(--n-900);

  --borde:        #232c3b;
  --borde-fuerte: #334054;

  --primario:        var(--sen-400);
  --primario-hover:  var(--sen-300);
  --primario-activo: var(--sen-200);
  --primario-suave:  #2a1508;
  --primario-borde:  #4d2410;
  --sobre-primario:  #1a0d04;

  --foco: var(--sen-300);

  --exito-fondo:  #052e1d;
  --exito-borde:  #085d3a;
  --exito-texto:  #75e0a7;
  --exito-fuerte: #47cd89;

  --error-fondo:  #37110f;
  --error-borde:  #7a271a;
  --error-texto:  #fda29b;
  --error-fuerte: #f97066;

  --aviso-fondo:  #2e2005;
  --aviso-borde:  #713b12;
  --aviso-texto:  #fde272;
  --aviso-fuerte: #fac515;

  --info-fondo:   #0b1c33;
  --info-borde:   #194185;
  --info-texto:   #84caff;
  --info-fuerte:  #53b1fd;

  --sombra-sm: 0 1px 2px rgb(0 0 0 / 0.35);
  --sombra-md: 0 2px 4px -1px rgb(0 0 0 / 0.4), 0 4px 12px -2px rgb(0 0 0 / 0.45);
  --sombra-lg: 0 4px 8px -2px rgb(0 0 0 / 0.45), 0 12px 28px -4px rgb(0 0 0 / 0.5);
}