/*==================================================
                UZAYO VARIABLES.CSS
        Luxury Ecommerce Design System
==================================================*/

/*==================================================
                GOOGLE FONTS
==================================================*/

:root{

/*==================================================
                    COLOURS
==================================================*/

--color-black:#0B0B0B;
--color-charcoal:#171717;
--color-dark:#202020;

--color-white:#FFFFFF;
--color-off-white:#FAFAFA;
--color-light:#F5F5F5;

--color-grey-100:#F8F8F8;
--color-grey-200:#EEEEEE;
--color-grey-300:#DDDDDD;
--color-grey-400:#BBBBBB;
--color-grey-500:#999999;
--color-grey-600:#777777;
--color-grey-700:#555555;
--color-grey-800:#333333;

--color-gold:#B89B5E;
--color-gold-light:#D7C08A;
--color-gold-dark:#9E7F42;

--color-success:#1FA44A;
--color-warning:#D99C1F;
--color-danger:#D64040;
--color-info:#2B78E4;

/*==================================================
                    TYPOGRAPHY
==================================================*/

--font-heading:'Playfair Display',serif;
--font-body:'Inter',sans-serif;

/*==================================================
                    FONT SIZES
==================================================*/

--fs-xs:.75rem;
--fs-sm:.875rem;
--fs-md:1rem;
--fs-lg:1.125rem;
--fs-xl:1.25rem;
--fs-2xl:1.5rem;
--fs-3xl:2rem;
--fs-4xl:2.8rem;
--fs-5xl:3.8rem;
--fs-6xl:5rem;

/*==================================================
                FONT WEIGHTS
==================================================*/

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

/*==================================================
                LETTER SPACING
==================================================*/

--tracking-tight:-0.03em;
--tracking-normal:0;
--tracking-wide:.08em;
--tracking-extra:.18em;

/*==================================================
                    CONTAINERS
==================================================*/

--container-xs:700px;
--container-sm:900px;
--container-md:1100px;
--container-lg:1280px;
--container-xl:1440px;
--container-full:1600px;

/*==================================================
                    SPACING
==================================================*/

--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-8:32px;
--space-10:40px;
--space-12:48px;
--space-16:64px;
--space-20:80px;
--space-24:96px;
--space-28:112px;
--space-32:128px;

/*==================================================
                    BORDER RADIUS
==================================================*/

--radius-xs:4px;
--radius-sm:8px;
--radius-md:14px;
--radius-lg:22px;
--radius-xl:34px;
--radius-pill:999px;

/*==================================================
                    SHADOWS
==================================================*/

--shadow-xs:
0 2px 8px rgba(0,0,0,.05);

--shadow-sm:
0 8px 20px rgba(0,0,0,.06);

--shadow-md:
0 18px 45px rgba(0,0,0,.08);

--shadow-lg:
0 28px 70px rgba(0,0,0,.12);

--shadow-xl:
0 40px 90px rgba(0,0,0,.18);

/*==================================================
                    BORDERS
==================================================*/

--border-light:1px solid #ECECEC;
--border-medium:1px solid #DDDDDD;
--border-dark:1px solid #333333;

/*==================================================
                    TRANSITIONS
==================================================*/

--transition-fast:.2s ease;
--transition:.35s ease;
--transition-slow:.55s ease;
--transition-cubic:cubic-bezier(.22,.61,.36,1);

/*==================================================
                    Z INDEX
==================================================*/

--z-dropdown:1000;
--z-sticky:1010;
--z-fixed:1020;
--z-overlay:1030;
--z-modal:1040;
--z-toast:1050;

/*==================================================
                NAVBAR
==================================================*/

--navbar-height:88px;
--announcement-height:42px;

/*==================================================
                PRODUCT CARDS
==================================================*/

--card-radius:18px;
--card-padding:24px;
--card-gap:24px;

/*==================================================
                BUTTONS
==================================================*/

--btn-height:54px;
--btn-padding:18px 40px;

/*==================================================
                INPUTS
==================================================*/

--input-height:56px;
--input-radius:12px;
--input-padding:18px;

/*==================================================
                HERO
==================================================*/

--hero-height:100vh;
--hero-overlay:rgba(0,0,0,.28);

/*==================================================
                IMAGES
==================================================*/

--image-radius:18px;

/*==================================================
                FOOTER
==================================================*/

--footer-padding:90px;

/*==================================================
                NEWSLETTER
==================================================*/

--newsletter-padding:120px;

/*==================================================
                ANIMATIONS
==================================================*/

--animation-speed:.8s;
--animation-delay:.15s;

/*==================================================
                BLUR
==================================================*/

--glass-blur:18px;

/*==================================================
                MAX WIDTHS
==================================================*/

--text-width:700px;
--content-width:1440px;

}