/* ==========================================================================
   Design tokens — Lauren Repostería
   Única fuente de verdad para color, tipografía, espaciado, sombra, radio,
   transición y capas (z-index). Cargar PRIMERO en cada página.

   Los valores reproducen exactamente la identidad visual vigente para que
   centralizarlos no altere la apariencia. Al añadir componentes o páginas,
   usar estas variables en lugar de hardcodear valores.
   ========================================================================== */

:root {
    /* ---- Color · marca -------------------------------------------------- */
    --color-lilac: #c8a5d8;          /* lila principal de marca */
    --color-lilac-deep: #b8a4d4;     /* lila de navegación y carrito */
    --color-lilac-dark: #b08bbb;     /* acento oscuro / hover */
    --color-lilac-strong: #9d84c4;   /* fin de degradados */
    --color-lilac-light: #f5ebf2;    /* fondo suave lila */
    --color-peach: #e8d4c8;          /* durazno secundario */

    /* ---- Color · texto -------------------------------------------------- */
    --color-text: #4a3c52;           /* texto principal (violeta profundo) */
    --color-text-soft: #8b7b9a;      /* texto secundario / apoyo */
    --color-ink: #1a1a1a;            /* texto de alto contraste (nav/carrito) */
    --color-ink-soft: #666666;       /* texto atenuado sobre fondo claro */

    /* ---- Color · superficie -------------------------------------------- */
    --color-white: #ffffff;
    --color-surface-glass: rgba(255, 255, 255, 0.75);
    --color-surface-cart: rgba(255, 255, 255, 0.95);
    --color-border-glass: rgba(255, 255, 255, 0.9);
    --color-border-lilac: rgba(184, 164, 212, 0.2);

    /* ---- Degradados ----------------------------------------------------- */
    --gradient-lilac: linear-gradient(135deg, #b8a4d4 0%, #9d84c4 100%);

    /* ---- Tipografía ----------------------------------------------------- */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* ---- Espaciado (escala base 4px) ----------------------------------- */
    --space-2xs: 0.25rem;   /* 4px  */
    --space-xs: 0.5rem;     /* 8px  */
    --space-sm: 0.75rem;    /* 12px */
    --space-md: 1rem;       /* 16px */
    --space-lg: 1.5rem;     /* 24px */
    --space-xl: 2rem;       /* 32px */
    --space-2xl: 3rem;      /* 48px */
    --space-3xl: 4rem;      /* 64px */

    /* ---- Radios --------------------------------------------------------- */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 999px;
    --radius-nav: 60px;

    /* ---- Sombras -------------------------------------------------------- */
    --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 0 40px rgba(0, 0, 0, 0.15);
    --shadow-lilac: 0 8px 20px rgba(176, 139, 187, 0.35);

    /* ---- Efecto glass --------------------------------------------------- */
    --blur-glass: 12px;
    --blur-cart: 20px;

    /* ---- Transiciones --------------------------------------------------- */
    --transition-base: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 0.2s ease;

    /* ---- Capas (z-index) ------------------------------------------------ */
    --z-base: 1;
    --z-nav: 1000;
    --z-fab: 1100;
    --z-cart: 1200;
    --z-modal: 1300;
    --z-toast: 1400;
}

/* Respeto de accesibilidad: reduce el movimiento cuando el usuario lo pide.
   Regla global de apoyo; los componentes pueden afinar según su animación. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}