/* Design tokens Zander · extraído de la web actual */

:root {
    /* === Colores marca === */
    --zander-yellow: #FCC61C;       /* CTA principal, accents */
    --zander-black: #1D1D1B;        /* Texto, fondos oscuros */
    --zander-magenta: #f00069;      /* Accent secundario */
    --zander-white-soft: #fbfbfb;   /* Background secciones claras */
    --zander-white-hi: #fffffe;     /* Texto sobre fondos oscuros */

    /* === Neutros === */
    --black: #000000;
    --white: #ffffff;
    --gray-100: #f5f5f5;
    --gray-300: #d5d4d0;
    --gray-500: #6a7282;
    --gray-900: #252523;

    /* === Tipografía · fuente real del sitio: Nunito === */
    --font-sans: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Nunito', sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* =========================================================
       ESCALA TIPOGRÁFICA ZANDER · estandarizada
       ========================================================= */
    --fs-small: 14px;
    --fs-body: 18px;
    --fs-h4: clamp(1.125rem, 1.5vw, 1.5rem);       /* 18–24px */
    --fs-h3: clamp(1.25rem, 2vw, 1.875rem);        /* 20–30px */
    --fs-h2: clamp(2.25rem, 5vw, 4.0625rem);       /* 36–65px */
    --fs-h1: clamp(2.5rem, 7vw, 6rem);             /* 40–96px */

    /* Legacy (mantenidos para no romper) */
    --fs-xs:   var(--fs-small);
    --fs-sm:   var(--fs-small);
    --fs-base: var(--fs-body);
    --fs-lg:   var(--fs-h4);
    --fs-xl:   var(--fs-h3);
    --fs-2xl:  var(--fs-h2);
    --fs-3xl:  var(--fs-h1);

    /* === Espaciados === */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;

    /* === Layout === */
    --container-max: 1290px;        /* extraído del WP actual (Stackable default) */
    --container-padding: clamp(1rem, 4vw, 2rem);

    /* === Radios y sombras === */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,.08);
    --shadow-lg: 0 12px 40px rgba(0,0,0,.12);

    /* === Transiciones === */
    --t-fast: 150ms ease;
    --t-base: 250ms ease;
    --t-slow: 400ms ease;

    /* === Transición de tema claro/oscuro ===
       Fondo y texto SIEMPRE usan este mismo valor para cruzar a la vez
       (si se desincronizan, el texto queda invisible un instante).
       La curva tiene extremos suaves pero pasa rápido por el centro,
       para minimizar el momento de bajo contraste. Sube/baja la duración
       aquí y afecta a toda la web. */
    --theme-fade-dur: 500ms;
    --theme-fade-ease: cubic-bezier(0.7, 0, 0.3, 1);
    --theme-fade: var(--theme-fade-dur) var(--theme-fade-ease);

    /* === Z-index === */
    --z-header: 100;
    --z-modal: 1000;
    --z-loader: 9999;
}