/* ==========================================================================
   CSS Custom Properties — Tree of Life Wellness Theme
   ========================================================================== */

:root {
    /* ---- Colors ---- */
    --color-primary:           #000000;
    --color-primary-overlay:   rgba(0, 0, 0, 0.40);
    --color-text-dark:         #090908;
    --color-dark:              #32342A;
    --color-sage:              #9AA17B;
    --color-sage-hover:        #8a9169;
    --color-background-light:  #E5E6E1;
    --color-background-warm:   #EAECE4;
    --color-white:             #FFFFFF;
    --color-border:            #D1D3CB;
    --color-text-muted:        #6B6D64;
    --color-error:             #C0392B;
    --color-success:           #27AE60;

    /* ---- Typography ---- */
    --font-heading:  'Montserrat', sans-serif;
    --font-body:     'Inter', sans-serif;

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

    /* rem values based on 62.5% root (1 rem = 10 px) */
    --fs-xs:     1.2rem;   /* 12px */
    --fs-sm:     1.4rem;   /* 14px */
    --fs-base:   1.6rem;   /* 16px */
    --fs-md:     1.8rem;   /* 18px */
    --fs-lg:     2.0rem;   /* 20px */
    --fs-xl:     2.4rem;   /* 24px */
    --fs-2xl:    3.2rem;   /* 32px */
    --fs-3xl:    4.0rem;   /* 40px */
    --fs-4xl:    4.8rem;   /* 48px */
    --fs-5xl:    5.6rem;   /* 56px */
    --fs-hero:   6.4rem;   /* 64px */

    --lh-tight:    1.2;
    --lh-snug:     1.3;
    --lh-normal:   1.5;
    --lh-relaxed:  1.7;

    /* ---- Spacing ---- */
    --space-xs:    0.4rem;
    --space-sm:    0.8rem;
    --space-md:    1.6rem;
    --space-lg:    2.4rem;
    --space-xl:    3.2rem;
    --space-2xl:   4.8rem;
    --space-3xl:   6.4rem;
    --space-4xl:   8.0rem;
    --space-5xl:  11.2rem;

    /* ---- Layout ---- */
    --container-max:  1280px;
    --container-sm:    768px;
    --container-lg:   1440px;
    --header-height:    72px;
    --border-radius:     8px;
    --border-radius-lg: 16px;

    /* ---- Transitions ---- */
    --transition-fast:   0.15s ease;
    --transition-base:   0.3s ease;
    --transition-slow:   0.5s ease;

    /* ---- Shadows ---- */
    --shadow-sm:  0  1px  3px rgba(0, 0, 0, 0.08);
    --shadow-md:  0  4px 12px rgba(0, 0, 0, 0.10);
    --shadow-lg:  0  8px 24px rgba(0, 0, 0, 0.12);
}