@import url('https://fonts.googleapis.com/css2?family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&display=swap');
:root {

    /* Colors */
    /* --color-primary: #804195; */
    --color-primary: #000000;
    /* --color-primary-dark: #662d79; */
    --color-primary-dark: #262629;
    --color-secondary: #3A7FFE;
    --color-primary-light: #EEE1F3;
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-text-primary: #292735;
    --color-text-secondary: #585858;
    --color-border: #D6D6D6;
    --color-border-filter: #999999;
    --color-border-light: #F5F5F5;
    --color-surface-muted: #F7F7F7;
    --color-surface-light: #F0F0F0;
    --color-overlay-subtle: rgba(0, 0, 0, 0.04);
    --color-heart: #EE4444;
    --rc-dark-btn: #1B1B1B;
    --rc-dark-btn-hover: #303030;
    --stroke-0: var(--color-heart);

    /* Typography */
    --font-body: "Roboto", sans-serif;
    --font-title: "Space Grotesk", sans-serif;
    --font-serif: "Roboto Serif", serif;

    --font-size-caption: 13px;
    --line-height-caption: 18px;

    --font-size-medium: 14px;

    --font-size-body: 15px;
    --line-height-body: 24px;
    --line-height-body-tight: 20px;

    --font-size-label: 17px;
    --line-height-label: 28px;
    --letter-spacing-label-active: 0.102px;

    --font-size-price: 18px;
    --line-height-price: 28px;

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

    /* Layout */
    --container-width: 1136px;
    --container-padding-desktop: 30px;
    --container-padding-mobile: 15px;
    --page-width: 1440px;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 24px;
    --space-3xl: 32px;
    --space-4xl: 40px;
    --space-5xl: 48px;
    --space-6xl: 56px;
    --space-7xl: 64px;
    --space-8xl: 72px;
    --space-9xl: 80px;
    --space-10xl: 88px;
    --space-11xl: 96px;
    --space-12xl: 104px;
    --space-13xl: 112px;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-full: 100px;

    /* Component sizes */
    --ring-style-btn-width-desktop: 110px;
    --ring-style-btn-width-mobile: 88px;
    --ring-style-image-size-desktop: 56px;
    --ring-style-image-size-mobile: 88px;
    --product-card-width-desktop: 272px;
    --stepper-circle-size-desktop: 32px;
    --stepper-circle-size-mobile: 24px;
    --stepper-border-width: 6px;

    /* Animation */
    --transition-default: 0.3s ease;
    --rc-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --rc-transition-fast: 0.15s ease;
    --rc-header-height: 52px;

}