/*
Theme Name: Natural Options Kenya
Theme URI: https://naturaloptions.co.ke
Author: Natural Options Kenya
Author URI: https://naturaloptions.co.ke
Description: A premium beauty, skincare, fragrance and wellness e-commerce theme for Natural Options Kenya. Built for WooCommerce with Elementor compatibility. Features a modern, elegant design with natural aesthetics suitable for the Kenyan beauty market.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: natural-options
Tags: e-commerce, woocommerce, beauty, skincare, custom-logo, custom-menu, featured-images, theme-options

Natural Options Kenya — Premium Beauty E-Commerce Theme
*/

/* ============================================
   DESIGN SYSTEM TOKENS
   ============================================ */

:root {
    /* ---- Color Palette ---- */
    --no-forest:        #1B4332;
    --no-forest-light:  #2D6A4F;
    --no-forest-dark:   #0F2B1F;
    --no-sage:          #74956C;
    --no-sage-light:    #95B88E;
    --no-mint:          #D8E8D4;
    --no-cream:         #FDF8F0;
    --no-cream-dark:    #F5EDDF;
    --no-white:         #FFFFFF;
    --no-gold:          #C9A96E;
    --no-gold-light:    #D4BC8E;
    --no-gold-dark:     #A8893E;
    --no-charcoal:      #2D2D2D;
    --no-charcoal-light:#4A4A4A;
    --no-gray:          #7A7A7A;
    --no-gray-light:    #B5B5B5;
    --no-gray-lighter:  #E8E8E8;
    --no-red:           #C0392B;
    --no-red-light:     #FDEDEC;

    /* ---- Typography ---- */
    --font-heading:     'Cormorant Garamond', 'Georgia', serif;
    --font-body:        'Plus Jakarta Sans', 'Helvetica Neue', sans-serif;

    --fs-xs:            0.75rem;     /* 12px */
    --fs-sm:            0.875rem;    /* 14px */
    --fs-base:          1rem;        /* 16px */
    --fs-md:            1.125rem;    /* 18px */
    --fs-lg:            1.25rem;     /* 20px */
    --fs-xl:            1.5rem;      /* 24px */
    --fs-2xl:           2rem;        /* 32px */
    --fs-3xl:           2.5rem;      /* 40px */
    --fs-4xl:           3rem;        /* 48px */
    --fs-5xl:           3.5rem;      /* 56px */

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

    --lh-tight:         1.2;
    --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.25rem;     /* 4px */
    --space-sm:         0.5rem;      /* 8px */
    --space-md:         1rem;        /* 16px */
    --space-lg:         1.5rem;      /* 24px */
    --space-xl:         2rem;        /* 32px */
    --space-2xl:        3rem;        /* 48px */
    --space-3xl:        4rem;        /* 64px */
    --space-4xl:        6rem;        /* 96px */
    --space-5xl:        8rem;        /* 128px */

    /* ---- Layout ---- */
    --container-max:    1320px;
    --container-narrow: 960px;
    --container-wide:   1440px;
    --container-pad:    1.5rem;

    /* ---- Border Radius ---- */
    --radius-sm:        4px;
    --radius-md:        8px;
    --radius-lg:        12px;
    --radius-xl:        16px;
    --radius-full:      9999px;

    /* ---- Shadows ---- */
    --shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg:        0 8px 30px rgba(0, 0, 0, 0.10);
    --shadow-xl:        0 16px 48px rgba(0, 0, 0, 0.12);
    --shadow-card:      0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-card-hover:0 8px 24px rgba(0, 0, 0, 0.12);

    /* ---- Transitions ---- */
    --transition-fast:  150ms ease;
    --transition-base:  250ms ease;
    --transition-slow:  400ms ease;
    --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ---- Z-Index ---- */
    --z-dropdown:       100;
    --z-sticky:         200;
    --z-fixed:          300;
    --z-overlay:        400;
    --z-modal:          500;
    --z-toast:          600;

    /* ---- Header Heights ---- */
    --announcement-h:   40px;
    --header-top-h:     70px;
    --header-nav-h:     50px;
    --header-total-h:   calc(var(--announcement-h) + var(--header-top-h) + var(--header-nav-h));
}