/* =========================================================
   TOKENS — identidad visual de Aedos
   Cuando llegue el rebranding (Lou), se cambia SOLO este archivo.
   ========================================================= */
:root{
    /* Paleta actual (tomada de 08 Web) */
    --naranja: #D86018;
    --durazno: #FFAA4D;
    --crema:   #EFE0CD;
    --azul:    #004976;
    --celeste: #B6CFD0;
    --cafe:    #3F2021;
    --blanco:  #FFFFFF;
    --caqui:   #B9A57F;

    /* Roles (usar estos en el CSS, no los colores directos) */
    --c-marca:        var(--naranja);
    --c-marca-hover:  var(--durazno);
    --c-fondo:        var(--crema);
    --c-texto:        var(--cafe);
    --c-texto-claro:  var(--crema);
    --c-oscuro:       var(--cafe);
    --c-profundo:     var(--azul);
    --c-acento:       var(--celeste);
    --c-velo:         rgb(185 165 127 / .5);   /* caqui al 50 %: menú de cuartos del visor 360 */
    --c-hero:         var(--naranja);   /* bloque del logo en el hero + header */
    --c-nav-hover:    var(--cafe);
    --hero-tinte:     .3;               /* opacidad del color dentro de las letras del logo (0 = video limpio) */

    /* Tipografías */
    --f-titulos: "Cormorant Garamond", Georgia, serif;
    --f-texto:   "Lato", system-ui, sans-serif;

    /* Escala tipográfica fluida (celular → escritorio) */
    --t-xs:  .8rem;
    --t-sm:  .95rem;
    --t-base: clamp(1rem, .96rem + .2vw, 1.125rem);
    --t-lg:  clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
    --t-xl:  clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem);
    --t-2xl: clamp(2.2rem, 1.4rem + 3.6vw, 4.5rem);
    --t-3xl: clamp(2.8rem, 1.6rem + 5.5vw, 6rem);

    /* Espaciado */
    --gutter: clamp(1rem, .5rem + 3vw, 6rem);   /* margen lateral de página */
    --sec-y:  clamp(4rem, 3rem + 6vw, 9rem);     /* aire vertical entre secciones */
    --gap:    clamp(1rem, .6rem + 1.5vw, 2rem);
    --ancho-max: 1280px;

    /* Formas y movimiento */
    --radio:    1rem;
    --radio-lg: 2rem;
    --radio-hero: 0 0 3rem 3rem;
    --ease: cubic-bezier(.16,.84,.44,1);
    --dur: .4s;

    --header-h: 72px;
}

/* Paddings en múltiplos de 8px: los márgenes fluidos se redondean en saltos de .5rem (8px)
   donde el navegador soporta round(); si no, se queda el clamp con límites ya en múltiplos de 8 */
@supports (width: round(1px, 1px)) {
    :root{
        --gutter: round(clamp(1rem, .5rem + 3vw, 6rem), .5rem);
        --sec-y:  round(clamp(4rem, 3rem + 6vw, 9rem), .5rem);
    }
}

/* ---------- Variaciones (se prueban con el panel de borrador) ---------- */
[data-hero="azul"]  { --c-hero: var(--azul); --c-nav-hover: var(--durazno); }
[data-hero="cafe"]  { --c-hero: var(--cafe);  --c-nav-hover: var(--durazno); }
[data-hero="crema"] { --c-hero: var(--crema); --c-nav-hover: var(--naranja); }

[data-titulos="lato"] { --f-titulos: "Lato", system-ui, sans-serif; }