:root {


    /* Brand colours extracted from Egessential logo */
    --color-primary: #7c0048;
    --color-secondary: #000000;
    --color-secondary-dark: #c8c2cc;
    --color-accent: #f0f5e5;
    --color-text-black: #000000;
    --color-text-white: #ffffff;
    --color-text-muted: #666666;
    --color-text-subtle: #999999;
    --color-text-inverse: #ffffff;
    --color-bg-default: #f4f0eb;
    --color-bg-cream: #f9f8f3;
    --color-bg-light: #f5f5f5;
    --color-bg-muted: #f0f0f0;
    --color-bg-dark: #000000;
    --color-border: #eeeeee;
    --color-border-dark: #cccccc;
    --color-border-soft: rgba(31, 23, 32, 0.05);
    --color-border-faint: rgba(31, 23, 32, 0.1);
    --color-overlay-dark: rgba(31, 23, 32, 0.3);
    --color-border-black: rgba(31, 23, 32, 0.9);

    /* Typography */
    --font-primary: "Sora", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-secondary: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-heading: var(--font-primary);
    --font-body: var(--font-secondary);
    --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "Courier New", monospace;

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

    --font-size-top-bar: 0.6875rem;
    --font-size-top-bar-sm: 0.5625rem;
    --font-size-header-nav-label: 0.625rem;

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

    --line-height-tight: 1.2;
    --line-height-base: 1.6;
    --line-height-loose: 1.8;

    --opacity-variation-unavailable: 0.35;
    --stroke-decorate-strike: 0.0625rem;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-14: 4rem;
    --space-16: 6rem;
    --space-20: 8rem;
    --space-22: 10rem;

    --layout-content-max: 75rem;

    /** Same media frame for all product cards (homepage carousel + shop archive). */
    --layout-product-card-media-aspect: 3 / 4;
    --layout-product-card-media-height: clamp(24rem, 32vw, 31.25rem);
    --layout-product-card-media-height-tablet: clamp(20rem, 50vw, 28rem);
    --layout-product-card-media-height-mobile: clamp(18rem, 92vw, 30rem);
    --policy-content-max-width: 42rem;
    --contact-page-copy-max-width: 46rem;
    --color-border-header-inverse: rgba(255, 255, 255, 0.12);

    /* Radius / shadow / motion */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-full: 9999px;
    --radius-none: 0;

    --shadow-above-sm: 0 calc(-1 * var(--space-3)) var(--space-6) calc(-1 * var(--space-5)) var(--color-border-faint);
    
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
    --transition-accordion: 420ms cubic-bezier(0.22, 1, 0.36, 1);
    --opacity-hover-muted: 0.9;

    --header-sticky-extra-scroll: var(--space-8);

    /* Z-index */
    --z-base: 0;
    --z-raised: 10;
    --z-sticky: 1000;
    --z-overlay: 1100;
    --z-modal: 1200;
    --z-tooltip: 1300;

    --hero-content-max-width: 36rem;
    --hero-title-size: clamp(var(--font-size-2xl), 5vw, var(--font-size-3xl));
    --hero-subtitle-size: clamp(var(--font-size-sm), 2vw, var(--font-size-lg));

    /* Customizer (wp-admin control panel) */
    --customizer-panel-scroll-max: 16.25rem;

}