/* ==========================================================================
   PB Design System
   CORE · Variables
   ========================================================================== */

:root {
    /* Colores */
    --color-fucsia: #b40e8a;
    --color-bordoy: #8000ff;
    --color-dorado: #dcb900;
    --color-verde: #009d00;
    --color-rojo: #c80000;
    --color-azul: #4d4dff;
    --color-naranja: #ff8904;
    --color-fondo: #faf5ff;
    --color-blanco: #ffffff;
    --color-negro: #000000;
    --color-seleccion: #ff00ff;
    --color-texto: #111111;
    --color-superficie: #ffffff;
    --color-footer: #f1defe;

    /* Tipografía */
    --fuente-display: "Cormorant Garamond", serif;
    --fuente-acento: "Montserrat", sans-serif;
    --fuente-texto: "Montserrat", sans-serif;

    /* Escala tipográfica */
    --fs-100: .875rem;
    --fs-200: 1rem;
    --fs-300: 1.1rem;
    --fs-400: 1.2rem;   /* Empatado exactamente con el 1.2rem de las reseñas */
    --fs-500: 1.35rem;
    --fs-600: 1.5rem;
    --fs-700: 1.8rem;   /* Mínimo del Hero */
    --fs-800: 2.2rem;
    --fs-900: 2.8rem;   /* Máximo del Hero (el texto más grande) */
    --fs-1000: 3.5rem;


    /* Espaciados */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;

    /* Radios */
    --radio-sm: .5rem;
    --radio-md: 1rem;
    --radio-lg: 1.6rem;
    --radio-xl: 2.4rem;
    --radio-pill: 999px;
    --radio-50: 50%;


    /* Bordes */
    --border-light: 2px solid var(--color-dorado);
    --border-gold: 3px solid var(--color-dorado);
    --border-dark: 4px solid var(--color-dorado);
    --border-bordoy: 8px solid var(--color-dorado);


    /* Sombras */
    --shadow-sm: 0 6px 20px rgba(0, 0, 0, .05);
    --shadow-md: 0 12px 35px rgba(0, 0, 0, .08);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, .12);
    --shadow-xl: 0 30px 70px rgba(0, 0, 0, .18);
    --shadow-bordoy: 5px 5px 5px 0px var(--color-dorado);
    --shadow-hero: 10px 10px 10px 0px var(--color-dorado);
    --shadow-derecha: 10px 10px 10px 0px var(--color-dorado);
    --shadow-izquierda: -10px 10px 10px 0px var(--color-dorado);
    --shadow-abajo: 0px 10px 10px 0px var(--color-dorado);
    --shadow-arriba: 0px -10px 10px 0px var(--color-dorado);

    /* Transiciones */
    --transition-fast: .2s ease;
    --transition-base: .3s ease;
    --transition-slow: .5s ease;

    /* Contenedores */
    --container-sm: 720px;
    --container-md: 960px;
    --container-lg: 1200px;
    --container-xl: 1440px;

    /* Capas */
    --z-header: 100;
    --z-overlay: 500;
    --z-modal: 1000;
}