/**
 * CSS Variables - Belen Travel Agency Theme
 * Design tokens from brand guidelines
 */

:root {
    /* =====================
       Brand Colors
    ===================== */
    --brandOrange1: #ff9700;
    --brandBrown1: #c17300;
    --brandBlue1: #0b1168;
    --brandDarkBlue1: #021f41;
    --brandDark1: #0a1727;
    --generalSoftWhite: #f5f6fa;

    /* =====================
       Typography - Base
    ===================== */
    /* Base 62.5% → 1rem = 10px */
    --font-size-base: 62.5%;

    /* Escala tipográfica */
    --text-xs:   1.1rem;  /* 11px */
    --text-sm:   1.2rem;  /* 12px */
    --text-base: 1.4rem;  /* 14px */
    --text-md:   1.6rem;  /* 16px */
    --text-lg:   1.8rem;  /* 18px */
    --text-xl:   2.0rem;  /* 20px */
    --text-2xl:  2.4rem;  /* 24px */
    --text-3xl:  3.0rem;  /* 30px */
    --text-4xl:  3.6rem;  /* 36px */
    --text-5xl:  4.8rem;  /* 48px */
    --text-6xl:  6.0rem;  /* 60px */

    /* =====================
       Font Families
    ===================== */
    --font-primary: 'Work Sans', sans-serif;

    /* Font weights */
    --fw-extralight: 100;
    --fw-light:      300;
    --fw-regular:    400;
    --fw-medium:     500;
    --fw-semibold:   600;
    --fw-bold:       700;
    --fw-extrabold:  800;
    --fw-black:      900;

    /* =====================
       Spacing
    ===================== */
    --space-xs:   0.8rem;
    --space-sm:   1.2rem;
    --space-md:   1.6rem;
    --space-lg:   2.4rem;
    --space-xl:   3.2rem;
    --space-2xl:  4.8rem;
    --space-3xl:  6.4rem;
    --space-4xl:  9.6rem;

    /* =====================
       Layout
    ===================== */
    --container-max:    1200px;
    --container-wide:   1440px;
    --container-narrow: 800px;
    --container-padding: 12rem; /* 120px lateral */
    --site-max-width:   120rem; /* 1200px — límite ultrawide */

    /* =====================
       Border Radius
    ===================== */
    --radius-sm:   1.2rem;
    --radius-md:   2.4rem;
    --radius-lg:   4.8rem; /* 48px */
    --radius-xl:   6.4rem; /* 64px */
    --radius-full: 9999px;

    /* =====================
       Shadows
    ===================== */
    --shadow-sm:  0px 4px 6px 0px rgba(24, 39, 75, 0.12), 0px 8px 8px 0px rgba(24, 39, 75, 0.08);
    --shadow-md:  0px 8px 28px 0px rgba(24, 39, 75, 0.12), 0px 18px 88px 0px rgba(24, 39, 75, 0.14);
    --shadow-lg:  0px 8px 28px -6px rgba(24, 39, 75, 0.12), 0px 18px 88px -4px rgba(24, 39, 75, 0.14);
    --shadow-hero: 0px 8px 28px 0px rgba(24, 39, 75, 0.22), 0px 18px 88px 0px rgba(24, 39, 75, 0.24);

    /* =====================
       Transitions
    ===================== */
    --transition-fast:   150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow:   500ms ease;

    /* =====================
       Z-index
    ===================== */
    --z-base:    1;
    --z-dropdown: 100;
    --z-sticky:  200;
    --z-overlay: 300;
    --z-modal:   400;
    --z-toast:   500;
}