:root {

    /* COLORS */

    --background: hsl(50, 100%, 98%);
    --foreground: hsl(180, 30%, 15%);

    --primary: hsl(183, 77%, 22%);
    --primary-light: hsl(174, 42%, 40%);
    --primary-dark: hsl(183, 85%, 15%);
    --primary-foreground: hsl(50,100%,98%);

    --secondary: hsl(45,30%,92%);
    --secondary-foreground: hsl(180,30%,15%);

    --accent: hsl(45,72%,47%);
    --accent-light: hsl(43,74%,60%);
    --accent-dark: hsl(45,80%,35%);
    --accent-foreground: hsl(180,30%,15%);

    --border: hsl(45,25%,85%);
    --input: hsl(45,25%,85%);

    /* TYPOGRAPHY */

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

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

    /* RADIUS */

    --radius-sm:4px;
    --radius-md:6px;
    --radius:8px;
    --radius-lg:12px;
    --radius-xl:16px;
    --radius-2xl:24px;

    /* SHADOWS */

    --shadow-soft:0 4px 20px -4px hsla(180,30%,15%,0.08);

    --shadow-elevated:0 12px 40px -8px hsla(180,30%,15%,0.12);

    --shadow-gold:0 4px 20px -4px hsla(45,72%,47%,0.3);

    --shadow-primary:0 4px 20px hsla(183,77%,22%,0.3);

    --shadow-primary-lg:0 8px 30px hsla(183,77%,22%,0.4);

    /* SPACING */

    --space-xs:8px;

    --space-sm:16px;

    --space-md:24px;

    --space-lg:32px;

    --space-xl:48px;

    --space-2xl:64px;

    --space-3xl:96px;

    /* CONTAINER */

    --container-width:1280px;

    /* TEXT */

--muted-foreground: hsl(180, 10%, 45%);

/* SURFACES */

--surface: #ffffff;

--surface-muted: hsl(50, 50%, 99%);

/*

Breakpoints

768px

1024px

1280px

*/

/* Product */

--product-card-radius: var(--radius-lg);
--product-card-shadow: var(--shadow-soft);

/* Buttons */

--button-height: 48px;

/* Header */

--header-height: 84px;

/* Product Images */

--product-image-ratio: 4 / 5;

}