/* ==========================================================================
   Acción Republicana — Tokens de diseño (basados en el brandbook)
   ========================================================================== */

/* Tipografía institucional: AmsiPro con respaldo Arial.
   Coloque los archivos en /assets/fonts/ para activar AmsiPro. */
@font-face {
    font-family: 'AmsiPro';
    src: url('/assets/fonts/AmsiPro-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'AmsiPro';
    src: url('/assets/fonts/AmsiPro-Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'AmsiPro';
    src: url('/assets/fonts/AmsiPro-Black.woff2') format('woff2');
    font-weight: 900; font-style: normal; font-display: swap;
}

:root {
    /* --- Colores principales --- */
    --ar-azul:        #204C97;
    --ar-rojo:        #D14B45;
    --ar-blanco:      #FFFFFF;
    --ar-gris-claro:  #F1F2F1;
    --ar-gris:        #888889;

    /* --- Complementarios --- */
    --ar-navy:        #0F2547;
    --ar-azul-deep:   #12305E;
    --ar-dorado:      #C9A961;
    --ar-crema:       #F8F9FB;
    --ar-borde:       #E2E8F0;
    --ar-texto:       #4A5568;
    --ar-rojo-estrella:#C8102E;
    --ar-rojo-oscuro: #9A2A26;

    /* --- Roles semánticos --- */
    --color-bg:        var(--ar-blanco);
    --color-ink:       #16223B;        /* texto principal */
    --color-ink-soft:  var(--ar-texto);
    --color-primary:   var(--ar-azul);
    --color-accent:    var(--ar-rojo);
    --color-gold:      var(--ar-dorado);
    --color-line:      var(--ar-borde);

    /* --- Tipografía --- */
    --font-sans: 'AmsiPro', Arial, 'Helvetica Neue', Helvetica, sans-serif;
    --fw-regular: 400;
    --fw-medium:  600;
    --fw-bold:    700;
    --fw-black:   900;

    /* Escala fluida */
    --fs-display: clamp(2.6rem, 1.4rem + 5vw, 5rem);
    --fs-h1: clamp(2rem, 1.3rem + 3vw, 3.4rem);
    --fs-h2: clamp(1.6rem, 1.1rem + 2vw, 2.5rem);
    --fs-h3: clamp(1.25rem, 1rem + 1vw, 1.6rem);
    --fs-lead: clamp(1.05rem, 0.95rem + 0.6vw, 1.3rem);
    --fs-base: 1.0625rem;
    --fs-sm: 0.9rem;
    --fs-xs: 0.78rem;

    /* --- Espaciado --- */
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-5: 3rem;
    --space-6: 4.5rem;
    --space-7: 7rem;

    /* --- Layout --- */
    --container: 1200px;
    --container-narrow: 880px;
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 22px;

    /* --- Sombras --- */
    --shadow-sm: 0 2px 8px rgba(15, 37, 71, 0.06);
    --shadow:    0 14px 40px rgba(15, 37, 71, 0.10);
    --shadow-lg: 0 30px 70px rgba(15, 37, 71, 0.16);
    --shadow-gold: 0 10px 30px rgba(201, 169, 97, 0.28);

    /* --- Transiciones --- */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --t-fast: 0.18s var(--ease);
    --t: 0.32s var(--ease);
    --header-h: 88px;
}