@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&family=Gulzar&display=swap');

:root {
    /* ==============================
       EXISTING TOKENS (PRESERVED)
       ============================== */

    /* Brand Colors (Preserving Teal/Orange Theme) */
    --y-color-primary: #17877F;
    --y-color-primary-hover: #FB8D04;
    --y-color-primary-text: #000000;
    --y-color-secondary-text: #ffffff;
    --y-color-third-text: #777777;
    --y-color-background: #F8F4F4;
    --y-color-background-gradient: linear-gradient(to right, #76E9E1 0%, #369C95 100%);
    --y-color-border: #DDDDDD;
    --y-color-divider: #9D9898;
    --y-color-success: #4BB543;
    --y-color-light-gray: #f7f7f7;
    --y-color-bg-hover: #f0f0f0;
    --y-color-primary-light: #e0f7f5;

    /* New Color Tokens (Added) */
    --y-color-background-dark: #0E0E0E;
    --y-color-background-light: #FFFFFF;
    --y-color-background-overlay: rgba(13, 13, 13, 0.8);
    --y-color-about-us-background: rgba(3, 74, 68, 0.52);
    --y-color-header-search: rgba(239, 239, 239, 1);
    --y-color-auth-form: #4a4a4a;
    --y-color-border-blured: rgba(0, 0, 0, 0.25);
    --y-color-border-dark: #000000;
    --y-color-error: rgba(255, 49, 49, 1);
    --y-color-error-hover: rgba(200, 0, 0, 1);
    --y-color-warning: rgba(255, 196, 48, 1);
    --y-color-accent: rgba(186, 21, 21, 1);
    --y-color-link: rgba(34, 127, 187, 1);
    --y-color-header-nav-link: rgba(103, 32, 68, 1);
    --y-color-hero-title: rgba(3, 74, 68, 0.52);
    --y-color-shop-hero: rgba(11, 10, 10, 0.76);
    --y-color-product-swatch-black: #333;
    --y-color-product-swatch-maroon: #5d0000;
    --y-color-discount: #e74c3c;
    /* Added for forms/badges */

    /* Opacity */
    --y-opacity-overlay: 0.6;
    --y-opacity-semitransparent: 0.2;
    --y-opacity-secondary: 0.4;
    --y-opacity-disabled: 0.5;

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

    /* Font Families */
    --y-font-family-primary: 'Cairo', Arial, sans-serif;
    --y-font-family-secondary: "Gulzar", serif;
    --y-font-family-calibri: 'Calibri', 'Cairo', Arial, sans-serif;

    /* Font Weights */
    --y-font-weight-regular: 400;
    --y-font-weight-semibold: 600;
    --y-font-weight-bold: 700;

    /* Font Sizes (Existing) */
    --y-font-size-xs: 0.5rem;
    /* 8px */
    --y-font-size-sm: 0.875rem;
    /* 14px */
    --y-font-size-md: 1rem;
    /* 16px */
    --y-font-size-lg: 1.125rem;
    /* 18px */
    --y-font-size-xl: 1.25rem;
    /* 20px */
    --y-font-size-2xl: 1.5rem;
    /* 24px */
    --y-font-size-3xl: 2.5rem;
    /* 40px (Preserved) */
    --y-font-size-4xl: 3rem;
    /* 48px (Preserved) */

    /* Font Sizes (New Added) */
    --y-font-size-xxs: 0.625rem;
    /* 10px */
    --y-font-size-xs: 0.75rem;
    /* 12px */
    --y-font-size-5xl: 3rem;
    /* 48px */
    --y-font-size-6xl: 3.75rem;
    /* 60px */
    --y-font-size-7xl: 90px;
    --y-font-size-10: 10px;
    --y-font-size-search: 15px;

    /* Line Heights */
    --y-line-height-sm: 1.2;
    --y-line-height-md: 1.4;
    --y-line-height-lg: 1.6;
    --y-line-height-xl: 2.0;

    /* Text Effects */
    --y-text-stroke-1: 1px;

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

    /* Existing Spacing */
    --y-spacing-xs: 8px;
    --y-spacing-sm: 10px;
    --y-spacing-md: 15px;
    --y-spacing-lg: 20px;
    --y-spacing-xl: 30px;
    --y-spacing-2xl: 40px;
    --y-spacing-3xl: 50px;

    /* New Spacing */
    --y-spacing-xxs: 4px;
    --y-spacing-4xl: 60px;
    --y-spacing-5xl: 70px;
    --y-spacing-6xl: 90px;
    --y-spacing-xs-neg: -8px;
    --y-spacing-sm-neg: -10px;

    /* Percentage Values */
    --y-percent-10: 10%;
    --y-percent-15: 15%;
    --y-percent-30: 30%;
    --y-percent-33: 33.33%;
    --y-percent-35: 35%;
    --y-percent-40: 40%;
    --y-percent-48: 48%;
    --y-percent-50: 50%;
    --y-percent-60: 60%;
    --y-percent-65: 65%;
    --y-percent-70: 70%;
    --y-percent-100: 100%;
    --y-percent-50-neg: -50%;

    /* ===== LAYOUT & SIZING ===== */

    /* Existing Layout */
    --y-max-width-default: 1200px;
    --y-width-popup: 500px;
    --y-width-icon-xxl: 4rem;
    /* Preserved from old file */

    /* New Layout Vars */
    --y-max-width-banner: 1300px;
    --y-max-width-form: 800px;
    --y-warranty-max-width: 600px;

    --y-width-percentage-sm: 25%;
    --y-width-percentage-sm-plus: 30%;
    --y-width-percentage-md: 50%;
    --y-width-percentage-60: 60%;
    --y-width-percentage-70: 70%;
    --y-width-percentage-lg: 75%;
    --y-width-percentage-lg-minus: 70%;
    --y-width-percentage-80: 80%;
    --y-width-percentage-90: 90%;
    --y-width-percentage-95: 95%;
    --y-width-percentage-full: 100%;
    --y-width-percentage-130: 130%;

    --y-height-percentage-60: 60%;
    --y-height-percentage-70: 70%;
    --y-height-percentage-80: 80%;
    --y-height-percentage-90: 90%;
    --y-height-percentage-full: 100%;

    --y-width-input-sm: 50px;
    --y-width-input-md: 100px;
    --y-width-input-lg: 150px;

    --y-mobile-max-width: calc(100vw - var(--y-spacing-lg));
    --y-size-container-sm: 300px;
    --y-search-expanded-width: 200px;

    /* Utility Sizes */
    --y-size-2: 2px;
    --y-size-4: 4;
    --y-size-5: 5px;
    --y-size-6: 6px;
    --y-size-8: 8px;
    --y-size-8-neg: -8px;
    --y-size-10: 10px;
    --y-size-14: 14px;
    --y-size-16: 16px;
    --y-size-18: 18px;
    --y-size-20: 20px;
    --y-size-24: 24px;
    --y-size-26: 26px;
    --y-size-28: 28px;
    --y-size-30: 30px;
    --y-size-32: 32px;
    --y-size-35: 35px;
    --y-size-38: 38px;
    --y-size-40: 40px;
    --y-size-48: 48px;
    --y-size-50: 50px;
    --y-size-56: 56px;
    --y-size-60: 60px;
    --y-size-64: 64px;
    --y-size-75: 75px;
    --y-size-80: 80px;
    --y-size-90: 90px;
    --y-size-100: 100px;
    --y-size-120: 120px;
    --y-size-150: 150px;
    --y-size-160: 160px;
    --y-size-180: 180px;
    --y-size-200: 200px;
    --y-size-220: 220px;
    --y-size-240: 240px;
    --y-size-250: 250px;
    --y-size-260: 260px;
    --y-size-280: 280px;
    --y-size-300: 300px;
    --y-size-350: 350px;
    --y-size-350-alt: 350px;
    --y-size-400: 400px;
    --y-size-450: 450px;
    --y-size-500: 500px;
    --y-size-600: 600px;
    --y-size-800: 800px;
    --y-size-900: 900px;

    /* Component Sizes */
    --y-minheight-200: 200px;
    --y-card-min-width-sm: 120px;
    --y-card-min-width-md: 140px;

    --y-size-button-sm: 40px;
    --y-size-button-md: 45px;
    --y-size-button-lg: 50px;
    --y-size-button-xl: 60px;
    --y-size-button-search: 40px;

    /* Icon Dimensions */
    --y-icon-size-xs: 20px;
    --y-icon-size-sm: 30px;
    --y-icon-size-md: 40px;
    /* Preserved */
    --y-icon-size-lg: 45px;
    /* Preserved */
    --y-icon-size-xl: 70px;
    --y-icon-size-2xl: 100px;

    --y-width-icon-2xl: 4rem;
    --y-width-icon-2xl-tablet: 3.2rem;
    --y-width-icon-2xl-mobile: 2.4rem;

    /* Image Sizes */
    --y-size-image-xs: 100px;
    --y-size-image-sm: 150px;
    --y-size-image-md: 200px;
    --y-size-image-lg: 250px;
    --y-size-image-xl: 300px;

    /* Header Sizes */
    --y-header-height: 100px;
    --y-header-logo-height: 80px;
    --y-header-logo-height-mobile: 60px;
    --y-header-search-height: 36px;
    --y-mobile-icon-width: 20px;

    /* Hero Sizes */
    --y-hero-height-xs: 30vh;
    --y-hero-height-small: 40vh;
    --y-hero-height-mobile: 50vh;
    --y-hero-height-tablet: 60vh;
    --y-hero-height-desktop: 80vh;
    --y-hero-image-height-mobile: 220px;
    --y-hero-image-height-tablet: 360px;
    --y-hero-image-height-desktop: 420px;
    --y-hero-media-max-mobile: 280px;
    --y-hero-media-max-tablet: 340px;
    --y-hero-media-max-desktop: 420px;

    /* Banner Sizes */
    --y-banner-height-mobile: 150px;
    --y-banner-height-tablet: 271px;
    --y-banner-height: 600px;

    /* Footer Sizes */
    --y-footer-logo-height: 200px;

    /* Aspect Ratios */
    --y-aspect-ratio-4-3: 4 / 3;
    --y-aspect-ratio-16-10: 16 / 10;

    /* ===== BORDERS & SHADOWS ===== */
    --y-border-radius-xs: 3px;
    --y-border-radius-sm: 5px;
    --y-border-radius-md: 8px;
    --y-border-radius-lg: 15px;
    /* Preserved old value 15px vs 16px */
    --y-border-radius-20: 20px;
    --y-border-radius-24: 24px;
    --y-border-radius-50: 50px;
    --y-border-radius-full: 99px;

    --y-border-width-thin: 1px;
    --y-border-width-xs: 1px;
    --y-border-width-sm: 2px;
    --y-border-width-md: 3px;

    --y-outline-offset: 2px;
    --y-outline-thin: 2px;

    --y-shadow-xs: 0 5px 20px rgba(0, 0, 0, 0.05);
    --y-shadow-sm: 0 5px 20px rgba(0, 0, 0, 0.1);
    --y-shadow-md: 0 8px 16px rgba(0, 0, 0, 0.15);
    --y-shadow-lg: 0 15px 40px rgba(0, 0, 0, 0.15);
    --y-shadow-text: -1px 3px rgba(0, 0, 0, 0.5);
    --y-shadow-badge: 0 2px 4px rgba(0, 0, 0, 0.2);

    /* ===== ANIMATIONS ===== */
    --y-transition-fast: all 0.2s ease;
    --y-transition-default: all 0.3s ease;
    --y-transition-medium: all 0.25s ease;
    --y-transition-slow: all 0.5s ease;
    --y-transition-dropdown: opacity 0.2s ease, transform 0.2s ease;
    --y-transition-mobile-menu: transform 0.3s ease, opacity 0.3s ease;

    --y-transform-hover-up: -2px;
    --y-transform-scale-hover: 1.05;
    --y-transform-scale-active: 1.1;

    /* ===== Z-INDEX ===== */
    --y-z-index-2: 2;
    --y-z-index-sticky: 200;
    --y-z-index-dropdown: 100;
    --y-z-index-modal: 500;
    --y-z-index-popup: 1001;
    --y-z-index-1000: 1000;
    --y-z-index-search: 2;
    --y-z-index-mobile-menu: 1001;
    --y-z-index-header: 1002;

    /* ===== COMPONENT-SPECIFIC ===== */
    --y-active-link-bottom: -4px;
    --y-active-link-height: 2px;
    --y-mobile-menu-transform: -15px;
    --y-mobile-menu-transform-closed: -20px;
    --y-mobile-menu-width: 50%;
    --y-mobile-search-icon-position: 23px;

    --y-dropdown-min-width: 200px;
    --y-dropdown-offset: 10px;

    --y-badge-offset-top: -8px;
    --y-badge-offset-left: -10px;

    --y-hero-subtitle-size-mobile: var(--y-font-size-xl);
    --y-hero-subtitle-size-tablet: var(--y-font-size-2xl);
    --y-hero-subtitle-size-desktop: var(--y-font-size-3xl);
    --y-hero-title-size-mobile: var(--y-font-size-4xl);
    --y-hero-title-size-tablet: var(--y-font-size-5xl);
    --y-hero-title-size-desktop: var(--y-font-size-6xl);

    --y-max-height-mega-menu: 500px;
    --y-max-height-filter-mobile: 700px;

    --y-value-none: none;
    --y-value-auto: auto;
    --y-value-fit-content: fit-content;

    /* Breakpoints (Preserved) */
    --y-breakpoint-sm: 480px;
    --y-breakpoint-md: 768px;
    --y-breakpoint-lg: 992px;
    --y-breakpoint-xl: 1200px;
}