/* ============================================
   RE & RI – THE DESIGN FACTORY
   CSS Variables / Design Tokens
   ============================================ */

:root {
    /* ── Color Palette ── */
    --color-black:        #121315;
    --color-black-soft:   #1a1b1d;
    --color-black-light:  #23252a;
    --color-charcoal:     #a0a5b0;
    --color-dark-gray:    #4e525d;
    --color-gray:         #8c92a0;
    --color-gray-medium:  #6c717e;
    --color-gray-light:   #a0a5b0;
    --color-gray-soft:    #2c2e33;
    --color-off-white:    #23252a;
    --color-white:        #ffffff;
    --color-cream:        #2c2e33;
    --color-warm-white:   #2c2e33;

    /* Accent – Premium Gold (very subtle) */
    --color-gold:         #c5a880;
    --color-gold-light:   #dfccb5;
    --color-gold-dark:    #aa895f;
    --color-gold-muted:   rgba(197, 168, 128, 0.15);

    /* Warm Wood Tones */
    --color-wood:         #8b6f47;
    --color-wood-light:   #a68b5b;
    --color-wood-dark:    #6d5638;

    /* ── Typography ── */
    --font-heading:       'Cormorant Garamond', 'Georgia', serif;
    --font-body:          'Inter', 'Helvetica Neue', sans-serif;
    --font-accent:        'Outfit', sans-serif;
    --font-mono:          'JetBrains Mono', monospace;

    /* Font Sizes – Fluid */
    --fs-hero:            clamp(3.5rem, 8vw, 7rem);
    --fs-h1:              clamp(2.5rem, 5vw, 4.5rem);
    --fs-h2:              clamp(2rem, 4vw, 3.5rem);
    --fs-h3:              clamp(1.5rem, 3vw, 2.25rem);
    --fs-h4:              clamp(1.25rem, 2vw, 1.75rem);
    --fs-h5:              clamp(1rem, 1.5vw, 1.25rem);
    --fs-body:            1rem;
    --fs-body-lg:         1.125rem;
    --fs-small:           0.875rem;
    --fs-xs:              0.75rem;
    --fs-label:           0.8125rem;

    /* Font Weights */
    --fw-thin:            100;
    --fw-extralight:      200;
    --fw-light:           300;
    --fw-regular:         400;
    --fw-medium:          500;
    --fw-semibold:        600;
    --fw-bold:            700;

    /* Line Heights */
    --lh-tight:           1.1;
    --lh-heading:         1.2;
    --lh-body:            1.7;
    --lh-relaxed:         1.9;

    /* Letter Spacing */
    --ls-tight:           -0.02em;
    --ls-normal:          0;
    --ls-wide:            0.05em;
    --ls-wider:           0.1em;
    --ls-widest:          0.2em;
    --ls-ultra:           0.3em;

    /* ── 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;
    --space-5xl:          10rem;
    --space-section:      clamp(5rem, 10vw, 10rem);

    /* ── Layout ── */
    --container-max:      1320px;
    --container-narrow:   960px;
    --container-wide:     1440px;
    --gutter:             30px;

    /* ── Borders ── */
    --border-thin:        1px solid rgba(255, 255, 255, 0.08);
    --border-medium:      1px solid rgba(255, 255, 255, 0.15);
    --border-gold:        1px solid var(--color-gold);
    --border-light:       1px solid rgba(255, 255, 255, 0.1);
    --border-radius-sm:   4px;
    --border-radius-md:   8px;
    --border-radius-lg:   16px;
    --border-radius-xl:   24px;

    /* ── Shadows ── */
    --shadow-sm:          0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md:          0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg:          0 8px 40px rgba(0, 0, 0, 0.12);
    --shadow-xl:          0 16px 60px rgba(0, 0, 0, 0.16);
    --shadow-gold:        0 4px 20px rgba(201, 169, 110, 0.15);

    /* ── Transitions ── */
    --ease-out-expo:      cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart:     cubic-bezier(0.25, 1, 0.5, 1);
    --ease-in-out:        cubic-bezier(0.65, 0, 0.35, 1);
    --ease-smooth:        cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast:    0.2s var(--ease-smooth);
    --transition-base:    0.3s var(--ease-smooth);
    --transition-medium:  0.5s var(--ease-out-expo);
    --transition-slow:    0.8s var(--ease-out-expo);
    --transition-slower:  1.2s var(--ease-out-expo);

    /* ── Z-index ── */
    --z-behind:           -1;
    --z-base:             1;
    --z-dropdown:         100;
    --z-sticky:           200;
    --z-header:           1050;
    --z-overlay:          1100;
    --z-modal:            1200;
    --z-preloader:        9999;
}