/* ==========================================================================
   Design Tokens · Avancemos
   Sistema de diseño institucional para movimiento político de centro
   ========================================================================== */

/* Las fuentes se cargan desde el <head> de cada página (preconnect + stylesheet) para no bloquear el renderizado */

:root {
  /* Paleta Oficial */
  --azul-noche: #0B2440;
  --turquesa: #0B7A6E;
  --turquesa-claro: #14B8A6;
  --turquesa-hover: #086157;
  --ambar: #E8A33D;
  --ambar-suave: #FDF3E3;
  --marfil: #F7F5F0;
  --superficie: #FFFFFF;
  --superficie-elevada: #FFFFFF;
  --borde: #E4E0D8;
  --borde-suave: #EDEAE4;
  --texto: #16202B;
  --texto-suave: #5B6673;
  --texto-inverso: #FFFFFF;

  /* Estados */
  --exito: #15803D;
  --exito-fondo: #DCFCE7;
  --alerta: #B45309;
  --alerta-fondo: #FEF3C7;
  --error: #B91C1C;
  --error-fondo: #FEE2E2;

  /* Insignias de Verificación Estilo X */
  --insignia-azul: #2F7DE1;
  --insignia-dorada: #A67C00;
  --insignia-gris: #6B7785;

  /* Tipografía */
  --fuente-titulo: 'Fraunces', Georgia, serif;
  --fuente-cuerpo: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fuente-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Escala Fluida */
  --fs-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --fs-sm: clamp(0.8438rem, 0.8rem + 0.22vw, 0.9063rem);
  --fs-base: clamp(0.9375rem, 0.88rem + 0.28vw, 1.0313rem);
  --fs-md: clamp(1.0625rem, 0.98rem + 0.4vw, 1.1875rem);
  --fs-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.4375rem);
  --fs-xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.8125rem);
  --fs-2xl: clamp(1.875rem, 1.65rem + 1.1vw, 2.375rem);
  --fs-3xl: clamp(2.375rem, 2rem + 1.8vw, 3.25rem);
  --fs-h1: clamp(2.75rem, 2.2rem + 2.7vw, 4.25rem);

  /* Grilla y Espaciado (Múltiplos de 8px) */
  --espacio-1: 0.25rem;  /* 4px */
  --espacio-2: 0.5rem;   /* 8px */
  --espacio-3: 0.75rem;  /* 12px */
  --espacio-4: 1rem;     /* 16px */
  --espacio-5: 1.25rem;  /* 20px */
  --espacio-6: 1.5rem;   /* 24px */
  --espacio-8: 2rem;     /* 32px */
  --espacio-10: 2.5rem;  /* 40px */
  --espacio-12: 3rem;    /* 48px */
  --espacio-16: 4rem;    /* 64px */

  /* Radios */
  --radio-sm: 6px;
  --radio-md: 10px;
  --radio-lg: 14px;
  --radio-xl: 18px;
  --radio-pleno: 9999px;

  /* Sombras */
  --sombra-sm: 0 1px 3px rgba(11, 36, 64, 0.05), 0 1px 2px rgba(11, 36, 64, 0.03);
  --sombra-md: 0 4px 12px rgba(11, 36, 64, 0.07), 0 1px 3px rgba(11, 36, 64, 0.04);
  --sombra-lg: 0 12px 28px rgba(11, 36, 64, 0.1), 0 4px 8px rgba(11, 36, 64, 0.05);

  /* Transición */
  --transicion-rapida: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transicion-base: 220ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Ancho Máximo Contenedores */
  --ancho-sitio: 1180px;
  --ancho-feed: 620px;
  --ancho-nav-app: 260px;
  --ancho-lateral-app: 340px;
}

/* Modo Oscuro */
[data-tema="oscuro"] {
  --azul-noche: #E2E8F0;
  --marfil: #0B1622;
  --superficie: #12202F;
  --superficie-elevada: #1A2C3F;
  --borde: #23384D;
  --borde-suave: #192A3A;
  --texto: #F1F5F9;
  --texto-suave: #94A3B8;
  --turquesa: #2EC4B6;
  --turquesa-hover: #14B8A6;
  --turquesa-claro: #48DCD0;
  --ambar: #F59E0B;
  --ambar-suave: #2C2210;
  --sombra-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --sombra-md: 0 4px 14px rgba(0, 0, 0, 0.5);
  --sombra-lg: 0 12px 32px rgba(0, 0, 0, 0.7);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --azul-noche: #E2E8F0;
    --marfil: #0B1622;
    --superficie: #12202F;
    --superficie-elevada: #1A2C3F;
    --borde: #23384D;
    --borde-suave: #192A3A;
    --texto: #F1F5F9;
    --texto-suave: #94A3B8;
    --turquesa: #2EC4B6;
    --turquesa-hover: #14B8A6;
    --turquesa-claro: #48DCD0;
    --ambar: #F59E0B;
    --ambar-suave: #2C2210;
    --sombra-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --sombra-md: 0 4px 14px rgba(0, 0, 0, 0.5);
    --sombra-lg: 0 12px 32px rgba(0, 0, 0, 0.7);
  }
}