/* ============================================
   THREADS OF THE WILD — Design Tokens
   All colors, typography, spacing, and transitions
   defined as CSS custom properties.
   ============================================ */

:root {
    /* === Colors === */
    --color-cream:          #F4F1EC;
    --color-sand:           #E8DFD4;
    --color-terracotta:     #C4956A;
    --color-warm-brown:     #8B7355;
    --color-charcoal:       #2C2C2C;
    --color-dark:           #1A1A1A;
    --color-stone:          #A69882;
    --color-white:          #FFFFFF;
    --color-black:          #000000;

    /* Semantic aliases */
    --color-bg-primary:     var(--color-cream);
    --color-bg-dark:        var(--color-dark);
    --color-bg-sand:        var(--color-sand);
    --color-text-primary:   var(--color-charcoal);
    --color-text-light:     var(--color-cream);
    --color-text-muted:     var(--color-stone);
    --color-accent:         var(--color-terracotta);
    --color-accent-hover:   #B8845C;

    /* === Typography === */
    --font-display:         'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-body:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --fs-xs:                0.75rem;
    --fs-sm:                0.875rem;
    --fs-base:              1rem;
    --fs-md:                1.125rem;
    --fs-lg:                1.25rem;
    --fs-xl:                1.5rem;
    --fs-2xl:               2rem;
    --fs-3xl:               2.5rem;
    --fs-4xl:               3.5rem;
    --fs-5xl:               5rem;
    --fs-hero:              clamp(3rem, 8vw, 6.5rem);

    --fw-light:             300;
    --fw-regular:           400;
    --fw-medium:            500;
    --fw-semibold:          600;

    --lh-tight:             1.1;
    --lh-snug:              1.3;
    --lh-normal:            1.6;
    --lh-relaxed:           1.8;

    --ls-tight:             -0.02em;
    --ls-normal:            0;
    --ls-wide:              0.05em;
    --ls-wider:             0.1em;
    --ls-widest:            0.15em;

    /* === Spacing === */
    --space-xs:             0.5rem;
    --space-sm:             1rem;
    --space-md:             1.5rem;
    --space-lg:             2rem;
    --space-xl:             3rem;
    --space-2xl:            4rem;
    --space-3xl:            6rem;
    --space-4xl:            8rem;

    /* Section vertical padding — single source of truth */
    --section-py:           clamp(4rem, 8vw, 8rem);
    --section-padding:      var(--section-py); /* legacy alias */
    --container-max:        1400px;
    --container-padding:    var(--space-lg);

    /* === Transitions === */
    --ease-out:             cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-in-out:          cubic-bezier(0.645, 0.045, 0.355, 1);
    --ease-out-expo:        cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast:        200ms;
    --duration-normal:      400ms;
    --duration-slow:        800ms;

    /* === Z-index === */
    --z-base:               1;
    --z-header:             100;
    --z-mobile-menu:        150;
    --z-cart-drawer:        200;
    --z-loading-screen:     1000;

    /* === Borders === */
    --radius-sm:            2px;
    --radius-md:            4px;
    --radius-lg:            8px;
}

@media (max-width: 768px) {
    :root {
        --container-padding:    var(--space-sm);
    }
}