/* =========================================================
   LeCorch Photo · Tokens
   =========================================================
   Override de los tokens del parent tema-cero.
   Paleta playa cálida (Maui Jim style) + tipografía Outfit única.
   Vive en @layer plugins (heredado del parent).
   ========================================================= */

@layer plugins {

    :root {
        /* ----- Paleta playa ----- */
        --color-fondo:              #FAF7F2;   /* blanco hueso cálido */
        --color-fondo-suave:        #F0E9DD;   /* arena clara */
        --color-fondo-arena:        #E5DBC7;   /* arena media */
        --color-tinta:              #1F2A36;   /* azul muy oscuro (no negro puro) */
        --color-tinta-secundaria:   #6B7280;
        --color-oceano:             #1B4F6E;   /* azul océano cálido — ancla del sitio */
        --color-oceano-profundo:    #0F2F44;
        --color-turquesa:           #4FA8B8;   /* turquesa fresh para acento */
        --color-dorado:             #C8975E;   /* golden hour, raro */
        --color-coral:              #DD7B5A;   /* acento cálido extra */
        --color-linea:              #D8CDB8;   /* hairline arena */

        /* Header dinámicos (los pisa dynamic-css.php desde Customizer) */
        --header-tinta-initial:     #FFFFFF;
        --header-scroll-bg:         #FAF7F2;
        --header-scroll-blur:       14px;
        --header-scroll-opacity:    0.96;

        /* About + Footer dinámicos */
        --about-bg-color:           #F0E9DD;
        --footer-bg-color:          #1F2A36;
        --footer-tinta-color:       rgba(255, 255, 255, 0.78);
        --pills-active-color:       #1B4F6E;

        /* ----- Tipografía única · Outfit ----- */
        --font-display: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        --font-body:    "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        --font:         "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

        --peso-thin:     200;
        --peso-light:    300;
        --peso-regular:  400;
        --peso-medium:   500;
        --peso-semibold: 600;
        --peso-bold:     700;

        /* ----- Escala fluida ----- */
        --fs-eyebrow:   clamp(11px, 0.75vw, 12px);
        --fs-small:     clamp(13px, 0.95vw, 14px);
        --fs-body:      clamp(15px, 1vw, 16px);
        --fs-lead:      clamp(18px, 1.4vw, 22px);
        --fs-h6:        clamp(16px, 1.2vw, 18px);
        --fs-h5:        clamp(20px, 1.5vw, 24px);
        --fs-h4:        clamp(24px, 2vw,   32px);
        --fs-h3:        clamp(30px, 2.5vw, 42px);
        --fs-h2:        clamp(38px, 4vw,   60px);
        --fs-h1:        clamp(48px, 6vw,   96px);
        --fs-display:   clamp(60px, 8vw,   140px);

        --altura-body:    1.65;
        --altura-titulos: 1.05;
        --altura-display: 1.0;

        /* ----- Espaciado ----- */
        --sp-lateral:           clamp(16px, 1.5vw, 32px);
        --sp-section-y:         clamp(80px, 10vw, 160px);
        --sp-section-y-narrow:  clamp(48px, 6vw, 96px);
        --sp-card-inner-d:      32px;
        --sp-card-inner-m:      20px;

        /* ----- Layout ----- */
        --layout-max-width:        100%;       /* full viewport por default */
        --layout-max-width-narrow: 1280px;     /* contenedores centrados (Hablemos, prose) */
        --layout-max-width-prose:  64ch;

        /* ----- Easing y duración ----- */
        --ease-out-quint:  cubic-bezier(0.16, 1, 0.3, 1);
        --ease-out-expo:   cubic-bezier(0.19, 1, 0.22, 1);
        --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
        --ease:            cubic-bezier(0.16, 1, 0.3, 1);

        --dur-instant: 150ms;
        --dur-fast:    300ms;
        --dur-medium:  500ms;
        --dur-slow:    800ms;
        --dur-slower:  1200ms;
        --d-fast:      300ms;
        --d-med:       500ms;
        --d-slow:      800ms;

        /* ----- Sombras ----- */
        --shadow-flotante:  0 8px 24px rgba(15, 47, 68, 0.08);
        --shadow-modal:     0 20px 60px rgba(15, 47, 68, 0.2);
        --shadow-text-hero: 0 2px 16px rgba(15, 47, 68, 0.45);

        /* ----- Radios ----- */
        --radio-mini:  2px;
        --radio-card:  0;
        --radio-pill:  999px;
        --radio-modal: 8px;

        /* ----- Focus ----- */
        --focus-ring:   0 0 0 3px rgba(27, 79, 110, 0.35);
        --focus-offset: 3px;

        /* ----- Header altura ----- */
        --header-height: 84px;
    }

    @media (max-width: 768px) {
        :root {
            --header-height: 64px;
        }
    }

}