```css
/* ============================================================
   RAEES IMPORT & EXPORT
   ULTRA PREMIUM DESIGN SYSTEM
   ------------------------------------------------------------
   File: /assets/css/base/variables.css
   Version: 1.0

   IMPORTANT:
   This file is the single source of truth for:
   - Brand colors
   - Typography
   - Spacing
   - Containers
   - Radius
   - Shadows
   - Gradients
   - Transitions
   - Z-index
   ============================================================ */


:root {

    /* ========================================================
       01. BRAND COLORS
       ======================================================== */

    --color-primary: #0B2B20;
    --color-primary-dark: #061A13;
    --color-primary-deep: #04130E;

    --color-primary-light: #164A38;
    --color-primary-soft: #23654E;

    --color-secondary: #B78A3D;
    --color-secondary-dark: #8D6728;
    --color-secondary-light: #D4AF68;
    --color-secondary-soft: #E8D2A4;

    --color-accent: #C89B4B;
    --color-accent-dark: #9D742F;
    --color-accent-light: #E2C17F;


    /* ========================================================
       02. PREMIUM GOLD SYSTEM
       ======================================================== */

    --gold-50: #FBF7EE;
    --gold-100: #F5EBD6;
    --gold-200: #EAD6AE;
    --gold-300: #DDBD7D;
    --gold-400: #CFA454;
    --gold-500: #B78A3D;
    --gold-600: #9B7130;
    --gold-700: #795624;
    --gold-800: #573D1A;
    --gold-900: #35240F;


    /* ========================================================
       03. EMERALD SYSTEM
       ======================================================== */

    --emerald-50: #F2F8F5;
    --emerald-100: #DCEDE5;
    --emerald-200: #B9DCCB;
    --emerald-300: #86C2A5;
    --emerald-400: #52A37D;
    --emerald-500: #2E805F;
    --emerald-600: #23654E;
    --emerald-700: #164A38;
    --emerald-800: #0B2B20;
    --emerald-900: #061A13;
    --emerald-950: #04130E;


    /* ========================================================
       04. NEUTRAL / IVORY SYSTEM
       ======================================================== */

    --color-white: #FFFFFF;
    --color-black: #050806;

    --color-ivory: #FCFAF5;
    --color-ivory-soft: #F8F4EB;
    --color-cream: #F3ECDD;

    --color-neutral-50: #FAFAF8;
    --color-neutral-100: #F4F4F0;
    --color-neutral-200: #E8E8E2;
    --color-neutral-300: #D5D6CF;
    --color-neutral-400: #A9ADA5;
    --color-neutral-500: #7C827A;
    --color-neutral-600: #5D635C;
    --color-neutral-700: #414741;
    --color-neutral-800: #292E2A;
    --color-neutral-900: #171B18;


    /* ========================================================
       05. TEXT COLORS
       ======================================================== */

    --text-heading: #10231C;
    --text-body: #5D665F;
    --text-muted: #7C857E;
    --text-light: #A9B0AB;

    --text-dark: #07140F;
    --text-white: #FFFFFF;

    --text-on-primary: #FFFFFF;
    --text-on-gold: #10231C;


    /* ========================================================
       06. BACKGROUND COLORS
       ======================================================== */

    --bg-body: #FCFAF5;
    --bg-white: #FFFFFF;

    --bg-soft: #F8F4EB;
    --bg-muted: #F2F4F1;

    --bg-primary: #0B2B20;
    --bg-primary-dark: #061A13;
    --bg-primary-deep: #04130E;

    --bg-gold-soft: #FBF7EE;


    /* ========================================================
       07. BORDER COLORS
       ======================================================== */

    --border-light: rgba(11, 43, 32, 0.08);
    --border-soft: rgba(11, 43, 32, 0.12);
    --border-medium: rgba(11, 43, 32, 0.18);

    --border-white: rgba(255, 255, 255, 0.14);
    --border-white-strong: rgba(255, 255, 255, 0.24);

    --border-gold: rgba(183, 138, 61, 0.35);
    --border-gold-strong: rgba(183, 138, 61, 0.60);


    /* ========================================================
       08. STATUS COLORS
       ======================================================== */

    --color-success: #20845D;
    --color-success-soft: #E9F6F0;

    --color-warning: #C18420;
    --color-warning-soft: #FFF5DF;

    --color-danger: #B84242;
    --color-danger-soft: #FDECEC;

    --color-info: #3976A8;
    --color-info-soft: #EAF4FC;


    /* ========================================================
       09. WHATSAPP
       ======================================================== */

    --color-whatsapp: #25D366;
    --color-whatsapp-dark: #128C4A;


    /* ========================================================
       10. TYPOGRAPHY FAMILIES

       Loaded from header.php:
       DM Sans
       Playfair Display
       ======================================================== */

    --font-body: "DM Sans", Arial, sans-serif;

    --font-heading:
        "Playfair Display",
        Georgia,
        serif;

    --font-ui:
        "DM Sans",
        Arial,
        sans-serif;


    /* ========================================================
       11. FONT WEIGHTS
       ======================================================== */

    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;


    /* ========================================================
       12. FONT SIZE SCALE
       ======================================================== */

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.0625rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;

    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;
    --font-size-7xl: 4.5rem;
    --font-size-8xl: 5.5rem;


    /* ========================================================
       13. FLUID TYPOGRAPHY
       ======================================================== */

    --fs-display:
        clamp(3.25rem, 6.2vw, 6.5rem);

    --fs-hero:
        clamp(2.8rem, 5vw, 5.4rem);

    --fs-h1:
        clamp(2.6rem, 4.5vw, 4.75rem);

    --fs-h2:
        clamp(2.15rem, 3.7vw, 3.75rem);

    --fs-h3:
        clamp(1.65rem, 2.5vw, 2.5rem);

    --fs-h4:
        clamp(1.3rem, 1.8vw, 1.75rem);

    --fs-body-large:
        clamp(1.05rem, 1.25vw, 1.2rem);


    /* ========================================================
       14. LINE HEIGHT
       ======================================================== */

    --line-height-none: 1;
    --line-height-tight: 1.08;
    --line-height-heading: 1.15;
    --line-height-snug: 1.35;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.75;
    --line-height-loose: 1.9;


    /* ========================================================
       15. LETTER SPACING
       ======================================================== */

    --tracking-tighter: -0.04em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.04em;
    --tracking-wider: 0.08em;
    --tracking-widest: 0.14em;


    /* ========================================================
       16. SPACING SYSTEM
       ======================================================== */

    --space-0: 0;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-9: 2.25rem;
    --space-10: 2.5rem;

    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-18: 4.5rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-28: 7rem;
    --space-32: 8rem;
    --space-36: 9rem;
    --space-40: 10rem;


    /* ========================================================
       17. SECTION SPACING
       ======================================================== */

    --section-space-xs:
        clamp(3.5rem, 6vw, 5rem);

    --section-space-sm:
        clamp(4.5rem, 7vw, 6.5rem);

    --section-space:
        clamp(5.5rem, 8vw, 8rem);

    --section-space-lg:
        clamp(6.5rem, 10vw, 10rem);

    --section-space-xl:
        clamp(8rem, 12vw, 12rem);


    /* ========================================================
       18. CONTAINER SYSTEM
       ======================================================== */

    --container-xs: 540px;
    --container-sm: 720px;
    --container-md: 960px;
    --container-lg: 1140px;
    --container-xl: 1320px;
    --container-2xl: 1440px;

    --container-premium: 1380px;

    --container-padding:
        clamp(1rem, 3vw, 2rem);


    /* ========================================================
       19. BORDER RADIUS
       ======================================================== */

    --radius-none: 0;

    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-3xl: 42px;

    --radius-pill: 999px;
    --radius-circle: 50%;


    /* ========================================================
       20. SHADOW SYSTEM
       ======================================================== */

    --shadow-xs:
        0 2px 8px rgba(5, 24, 17, 0.04);

    --shadow-sm:
        0 6px 18px rgba(5, 24, 17, 0.06);

    --shadow-md:
        0 12px 32px rgba(5, 24, 17, 0.08);

    --shadow-lg:
        0 20px 50px rgba(5, 24, 17, 0.10);

    --shadow-xl:
        0 30px 80px rgba(5, 24, 17, 0.14);

    --shadow-2xl:
        0 40px 100px rgba(5, 24, 17, 0.18);

    --shadow-premium:
        0 25px 70px rgba(4, 19, 14, 0.12);

    --shadow-premium-dark:
        0 30px 90px rgba(0, 0, 0, 0.28);

    --shadow-gold:
        0 16px 45px rgba(183, 138, 61, 0.20);

    --shadow-whatsapp:
        0 14px 34px rgba(37, 211, 102, 0.28);


    /* ========================================================
       21. INNER SHADOWS
       ======================================================== */

    --shadow-inner-light:
        inset 0 1px 0 rgba(255, 255, 255, 0.65);

    --shadow-inner-dark:
        inset 0 1px 0 rgba(255, 255, 255, 0.08);


    /* ========================================================
       22. BRAND GRADIENTS
       ======================================================== */

    --gradient-primary:
        linear-gradient(
            135deg,
            #0B2B20 0%,
            #164A38 100%
        );

    --gradient-primary-dark:
        linear-gradient(
            135deg,
            #04130E 0%,
            #0B2B20 100%
        );

    --gradient-emerald:
        linear-gradient(
            135deg,
            #164A38 0%,
            #23654E 100%
        );

    --gradient-gold:
        linear-gradient(
            135deg,
            #8D6728 0%,
            #B78A3D 42%,
            #D4AF68 100%
        );

    --gradient-gold-light:
        linear-gradient(
            135deg,
            #F5EBD6 0%,
            #DDBD7D 100%
        );

    --gradient-ivory:
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #FCFAF5 100%
        );


    /* ========================================================
       23. HERO / DARK SECTION GRADIENTS
       ======================================================== */

    --gradient-hero:
        linear-gradient(
            110deg,
            rgba(4, 19, 14, 0.96) 0%,
            rgba(6, 26, 19, 0.91) 40%,
            rgba(11, 43, 32, 0.73) 70%,
            rgba(11, 43, 32, 0.48) 100%
        );

    --gradient-dark-overlay:
        linear-gradient(
            180deg,
            rgba(4, 19, 14, 0.08) 0%,
            rgba(4, 19, 14, 0.90) 100%
        );

    --gradient-card-overlay:
        linear-gradient(
            180deg,
            rgba(4, 19, 14, 0) 25%,
            rgba(4, 19, 14, 0.92) 100%
        );


    /* ========================================================
       24. DECORATIVE RADIAL GRADIENTS
       ======================================================== */

    --glow-gold:
        radial-gradient(
            circle,
            rgba(212, 175, 104, 0.22) 0%,
            rgba(212, 175, 104, 0) 70%
        );

    --glow-emerald:
        radial-gradient(
            circle,
            rgba(82, 163, 125, 0.18) 0%,
            rgba(82, 163, 125, 0) 70%
        );


    /* ========================================================
       25. GLASS SYSTEM
       ======================================================== */

    --glass-light:
        rgba(255, 255, 255, 0.72);

    --glass-light-strong:
        rgba(255, 255, 255, 0.88);

    --glass-dark:
        rgba(6, 26, 19, 0.72);

    --glass-dark-strong:
        rgba(4, 19, 14, 0.88);

    --glass-border:
        rgba(255, 255, 255, 0.16);

    --glass-blur: 18px;
    --glass-blur-lg: 28px;


    /* ========================================================
       26. ICON SIZES
       ======================================================== */

    --icon-xs: 14px;
    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-lg: 24px;
    --icon-xl: 32px;
    --icon-2xl: 40px;
    --icon-3xl: 52px;


    /* ========================================================
       27. BUTTON HEIGHTS
       ======================================================== */

    --button-height-sm: 42px;
    --button-height: 50px;
    --button-height-lg: 58px;
    --button-height-xl: 64px;


    /* ========================================================
       28. FORM CONTROL HEIGHTS
       ======================================================== */

    --input-height: 54px;
    --input-height-lg: 60px;


    /* ========================================================
       29. TRANSITIONS
       ======================================================== */

    --transition-fast:
        160ms ease;

    --transition:
        280ms ease;

    --transition-slow:
        450ms ease;

    --transition-premium:
        650ms cubic-bezier(
            0.16,
            1,
            0.3,
            1
        );

    --transition-bounce:
        500ms cubic-bezier(
            0.34,
            1.56,
            0.64,
            1
        );


    /* ========================================================
       30. ANIMATION DURATIONS
       ======================================================== */

    --duration-fast: 200ms;
    --duration-normal: 400ms;
    --duration-slow: 700ms;
    --duration-reveal: 900ms;


    /* ========================================================
       31. TRANSFORMS
       ======================================================== */

    --hover-lift-sm:
        translateY(-3px);

    --hover-lift:
        translateY(-6px);

    --hover-lift-lg:
        translateY(-10px);


    /* ========================================================
       32. Z-INDEX SYSTEM
       ======================================================== */

    --z-base: 1;

    --z-content: 10;

    --z-dropdown: 100;

    --z-sticky: 500;

    --z-header: 800;

    --z-overlay: 900;

    --z-mobile-nav: 1000;

    --z-floating: 1100;

    --z-modal: 1200;

    --z-toast: 1300;


    /* ========================================================
       33. HEADER DIMENSIONS
       ======================================================== */

    --topbar-height: 40px;

    --navbar-height: 88px;

    --header-total-height:
        calc(
            var(--topbar-height) +
            var(--navbar-height)
        );


    /* ========================================================
       34. PRODUCT / CARD RATIOS
       ======================================================== */

    --ratio-product: 4 / 5;

    --ratio-landscape: 16 / 10;

    --ratio-wide: 16 / 9;

    --ratio-square: 1 / 1;


    /* ========================================================
       35. COMMON CARD VALUES
       ======================================================== */

    --card-bg: #FFFFFF;

    --card-border:
        1px solid var(--border-light);

    --card-radius:
        var(--radius-xl);

    --card-shadow:
        var(--shadow-sm);

    --card-shadow-hover:
        var(--shadow-premium);


    /* ========================================================
       36. FOCUS SYSTEM
       ======================================================== */

    --focus-ring:
        0 0 0 4px rgba(183, 138, 61, 0.20);

    --focus-border:
        var(--color-secondary);


    /* ========================================================
       37. SELECTION COLORS
       ======================================================== */

    --selection-bg:
        var(--color-secondary);

    --selection-text:
        var(--color-primary-deep);


    /* ========================================================
       38. SCROLLBAR
       ======================================================== */

    --scrollbar-width: 10px;

    --scrollbar-track:
        var(--color-ivory-soft);

    --scrollbar-thumb:
        var(--color-primary);

    --scrollbar-thumb-hover:
        var(--color-secondary);


    /* ========================================================
       39. CONTENT WIDTHS
       ======================================================== */

    --content-xs: 480px;
    --content-sm: 620px;
    --content-md: 760px;
    --content-lg: 920px;


    /* ========================================================
       40. COMMON OPACITY
       ======================================================== */

    --opacity-disabled: 0.5;
    --opacity-muted: 0.7;
    --opacity-overlay: 0.85;

}
```