/* CSS Variables */
:root {
    /* ========================
        Core Colors (оригинальные значения)
        ======================== */
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-blue: #2B7FFF;
    --color-primary: #2B7FFF;
    --color-grey: #888888;
    --color-grey-medium: #888888;
    --color-grey-dark: #454545;
    --color-grey-light: rgba(0, 0, 0, 0.03);
    --color-grey-light-solid: #B0B0B0;
    --color-border: #f2f2f2;
    --color-border-secondary: #E5E5E5;
    --color-background: #f5f5f5;

    /* Additional Colors for Components */
    --text-black: #000000;
    --text-white: #FFFFFF;
    --text-grey-medium: #888888;
    --text-grey-light: #B0B0B0;
    --background-white: #FFFFFF;
    --background-grey: #F5F5F7;
    --background-blue: #2B7FFF;
    --background-black: #000000;
    --icon-black: #000000;
    --icon-white: #FFFFFF;
    --rating-yellow: #FDC700;
    --rating-grey: #E6E6E6;
    --link-blue: #2B7FFF;

    /* Semantic aliases */
    --color-text: #000000;
    --color-text-primary: #000000;
    --color-text-secondary: #454545;
    --color-text-muted: #888888;
    --color-background-alt: #F5F5F7;
    --color-rating: #FDC700;
    --color-rating-empty: #E6E6E6;
    --color-link: #2B7FFF;
    --color-link-hover: #1a6fe6;
    --color-discount: #155DFC;
    --color-discount-bg: #E8F0FF;

    /* ========================
        Typography
        ======================== */
    --font-inter: 'Inter', sans-serif;
    --font-sf-pro: 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-system: -apple-system, BlinkMacSystemFont, 'SF Pro', 'Segoe UI', sans-serif;

    /* Font Sizes */
    --fs-12: 12px;
    --fs-13: 13px;
    --fs-14: 14px;
    --fs-15: 15px;
    --fs-16: 16px;
    --fs-17: 17px;
    --fs-18: 18px;
    --fs-20: 20px;
    --fs-22: 22px;
    --fs-24: 24px;
    --fs-26: 26px;
    --fs-32: 32px;
    --fs-40: 40px;

    --fs-h2: 40px;

    /* Line Heights */
    --lh-tight: 1.2;
    --lh-normal: 1.5;
    --lh-18: 18px;
    --lh-20: 20px;
    --lh-22: 22px;
    --lh-24: 24px;
    --lh-26: 26px;

    /* Font Weights */
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* ========================
        Spacing
        ======================== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;
    --spacing-2xl: 40px;
    --spacing-3xl: 50px;
    --spacing-4xl: 60px;
    --spacing-xxl: 50px;

    /* ========================
        Border Radius
        ======================== */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-3xl: 30px;
    --radius-round: 1000px;
    --radius-full: 1000px;

    /* ========================
        Layout
        ======================== */
    --container-max-width: 1440px;
    --container-padding: 112px;
    --container-padding-md: 32px;
    --container-padding-sm: 20px;

    /* Card Sizes */
    --card-width: 292px;
    --card-width-sm: 228px;
    --card-gap: 16px;
    --card-gap-lg: 17px;

    /* Navigation */
    --nav-icon-size: 22px;
    --nav-button-size: 44px;

    /* ========================
        Transitions
        ======================== */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* ========================
        Shadows
        ======================== */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.12);

    /* ========================
        Z-Index Scale
        ======================== */
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-modal-backdrop: 900;
    --z-modal: 1000;
    --z-tooltip: 1100;


}


@media (max-width: 1024px) {
    :root {
        --container-padding: 32px;
        --fs-h2: 30px;
    }
}

@media (max-width: 768px) {
    :root {
        --container-padding: 20px;
        --fs-h2: 26px;
    }
}