:root {
    /* ============ COLORES ============ */
    --color-bg: #FFFFFF;
    --color-bg-soft: #F7F5F2;
    --color-surface: #FFFFFF;
    --color-border: #E8E2DD;
    --color-text: #1F1A18;
    --color-text-soft: #5C534F;
    --color-text-muted: #998F8A;

    /* Marca (del logo, uso muy puntual) */
    --color-brand-coral: #D98980;
    --color-brand-coral-deep: #C46E64;
    --color-brand-mint: #B9DDD2;
    --color-brand-mint-deep: #5DA08F;

    /* Acentos funcionales */
    --color-accent: #D98980;
    --color-accent-deep: #C46E64;
    --color-accent-soft: #FBE3DF;
    --color-discount: #D75A47;
    --color-success: #2E7D5B;
    --color-warning: #C29220;
    --color-danger: #B73A2D;

    /* ============ TIPOGRAFIA (solo Inter variable) ============ */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: var(--font-sans);
    --font-body: var(--font-sans);

    --fs-xs:    0.75rem;
    --fs-sm:    0.8125rem;
    --fs-base:  0.9375rem;
    --fs-md:    1rem;
    --fs-lg:    1.125rem;
    --fs-xl:    1.375rem;
    --fs-2xl:   1.75rem;
    --fs-3xl:   2.25rem;
    --fs-4xl:   3rem;
    --fs-hero:  clamp(2.5rem, 1.5rem + 4vw, 4.5rem);

    --fw-light:    300;
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-black:    800;

    --lh-tight:   1.05;
    --lh-snug:    1.20;
    --lh-normal:  1.50;
    --lh-relaxed: 1.70;

    --tracking-tighter: -0.04em;
    --tracking-tight:   -0.02em;
    --tracking-snug:    -0.01em;
    --tracking-normal:   0;
    --tracking-wide:     0.04em;
    --tracking-wider:    0.10em;
    --tracking-widest:   0.18em;

    /* ============ ESPACIADO ============ */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    --section-padding-y: clamp(3rem, 1.5rem + 4vw, 5rem);
    --container-padding-x: clamp(1rem, 0.5rem + 2vw, 2rem);
    --container-max: 1400px;

    /* ============ RADIOS ============ */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* ============ SOMBRAS (mínimas) ============ */
    --shadow-xs: 0 1px 1px rgba(31, 26, 24, 0.04);
    --shadow-sm: 0 1px 3px rgba(31, 26, 24, 0.06);
    --shadow-md: 0 4px 14px rgba(31, 26, 24, 0.08);
    --shadow-lg: 0 12px 30px rgba(31, 26, 24, 0.10);
    --shadow-focus: 0 0 0 3px rgba(217, 137, 128, 0.30);

    /* ============ TRANSICIONES ============ */
    --tr-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --tr-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --tr-slow: 360ms cubic-bezier(0.22, 0.61, 0.36, 1);

    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;

    /* ============ ALIASES (compatibilidad con CSS pre-v0.2) ============ */
    --color-primary:        var(--color-accent);
    --color-primary-deep:   var(--color-accent-deep);
    --color-primary-soft:   var(--color-accent-soft);
    --color-secondary:      var(--color-brand-mint);
    --color-secondary-deep: var(--color-brand-mint-deep);
    --color-secondary-soft: #EFF7F4;

    --radius-circle: 50%;
    --shadow-xl: 0 28px 64px rgba(31, 26, 24, 0.14), 0 8px 18px rgba(31, 26, 24, 0.06);
    --shadow-glow-primary:   0 8px 22px rgba(217, 137, 128, 0.28);
    --shadow-glow-secondary: 0 8px 22px rgba(93, 160, 143, 0.22);
    --tr-spring: 520ms cubic-bezier(0.34, 1.56, 0.64, 1);
}