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

:root {
    /* ===== COLORS ===== */

    /* Brand Colors */
    --y-color-primary: linear-gradient(to bottom, rgba(47, 69, 169, 1), rgba(19, 27, 67, 1));
    --y-color-primary-text2: rgba(47, 69, 169, 1);
    --y-color-accent: rgba(193, 181, 47, 1);

    /* Text Colors */
    --y-color-primary-text: rgba(0, 0, 0, 1);
    --y-color-secondary-text: rgba(255, 255, 255, 1);

    /* Background Colors */
    --y-color-background: rgba(255, 255, 255, 1);
    --y-color-background-dark: #0E0E0E;
    --y-color-background-light: rgba(249, 246, 241, 1);
    --y-color-background-overlay: rgba(13, 13, 13, 0.8);

    /* Border Colors */
    --y-color-border: #8C8C8C;
    --y-color-border-primary: rgba(47, 69, 169, 1);
    --y-color-border-blured: rgba(0, 0, 0, 0.25);
    --y-color-border-dark: #000000;


    --y-color-service-card: rgba(245, 245, 245, 1);
    --y-color-home-card: rgba(240, 240, 240, 1);

    --y-color-error: rgba(189, 19, 20, 1);

    /* ===== OPACITY ===== */
    --y-opacity-60: 0.6;
    --y-opacity-40: 0.4;
    --y-opacity-20: 0.2;
    --y-opacity-50: 0.5;

    /* ===== SPACING ===== */
    --y-spacing-0: 0;
    --y-spacing-4: 4px;
    --y-spacing-8: 8px;
    --y-spacing-10: 10px;
    --y-spacing-15: 15px;
    --y-spacing-20: 20px;
    --y-spacing-30: 30px;
    --y-spacing-40: 40px;
    --y-spacing-50: 50px;
    --y-spacing-60: 60px;
    --y-spacing-70: 70px;
    --y-spacing-80: 80px;
    --y-spacing-90: 90px;
    --y-spacing-100: 100px;
    --y-spacing-120: 120px;
    --y-spacing-130: 130px;
    --y-spacing-140: 140px;

    /* Negative Spacing */
    --y-spacing-neg-8: -8px;
    --y-spacing-neg-10: -10px;

    /* ===== PERCENTAGES ===== */
    --y-percent-10: 10%;
    --y-percent-15: 15%;
    --y-percent-25: 25%;
    --y-percent-30: 30%;
    --y-percent-35: 35%;
    --y-percent-40: 40%;
    --y-percent-45: 45%;
    --y-percent-50: 50%;
    --y-percent-60: 60%;
    --y-percent-65: 65%;
    --y-percent-70: 70%;
    --y-percent-80: 80%;
    --y-percent-90: 90%;
    --y-percent-95: 95%;
    --y-percent-100: 100%;

    /* Negative Percentages */
    --y-percent-neg-50: -50%;

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

    /* Font Family */
    --y-font-family-Cairo: 'Cairo', Arial, sans-serif;
    --y-font-family-Gulzar: "Gulzar", serif;
    --y-font-family-Calibri: 'Calibri', 'Cairo', sans-serif;

    /* Font Weights */
    --y-font-weight-500: 500;
    --y-font-weight-600: 600;
    --y-font-weight-700: 700;

    /* Font Sizes */
    --y-font-size-10: 0.625rem;
    --y-font-size-12: 0.75rem;
    --y-font-size-14: 0.875rem;
    --y-font-size-15: 0.9375rem;

    /* Search specific */
    --y-font-size-14: 0.875rem;
    --y-font-size-16: 1rem;
    --y-font-size-18: 1.125rem;
    --y-font-size-20: 1.25rem;
    --y-font-size-24: 1.5rem;
    --y-font-size-28: 1.75rem;
    --y-font-size-32: 2rem;
    --y-font-size-36: 2.25rem;
    --y-font-size-40: 2.5rem;
    --y-font-size-44: 2.75rem;
    --y-font-size-48: 3rem;
    --y-font-size-60: 3.75rem;
    --y-font-size-90: 5.625rem;

    /* Line Heights */
    --y-line-height-120: 1.2;
    --y-line-height-140: 1.4;
    --y-line-height-160: 1.6;
    --y-line-height-200: 2.0;

    /* ===== LAYOUT & WIDTHS ===== */

    /* Width - Fixed */
    --y-max-width-1200: 1200px;
    --y-max-width-1300: 1300px;

    /* ===== SIZING ===== */
    --y-size-neg-8: -8px;
    --y-size-2: 2px;
    --y-size-4: 4px;
    --y-size-5: 5px;
    --y-size-6: 6px;
    --y-size-8: 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-130: 130px;
    --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-270: 270px;
    --y-size-280: 280px;
    --y-size-300: 300px;
    --y-size-350: 350px;
    --y-size-365: 365px;
    --y-size-370: 370px;
    --y-size-400: 400px;
    --y-size-450: 450px;
    --y-size-500: 500px;
    --y-size-600: 600px;
    --y-size-800: 800px;
    --y-size-900: 900px;

    /* Button Sizes */
    --y-size-btn-40: 40px;
    --y-size-btn-45: 45px;
    --y-size-btn-50: 50px;
    --y-size-btn-60: 60px;
    --y-size-btn-70: 70px;

    /* Icon Sizes */
    --y-icon-size-20: 20px;
    --y-icon-size-25: 25px;
    --y-icon-size-30: 30px;
    --y-icon-size-40: 40px;
    --y-icon-size-45: 45px;
    --y-icon-size-70: 70px;
    --y-icon-size-100: 100px;

    /* ===== VIEWPORT HEIGHTS ===== */
    --y-height-10vh: 10vh;
    --y-height-20vh: 20vh;
    --y-height-30vh: 30vh;
    --y-height-40vh: 40vh;
    --y-height-50vh: 50vh;
    --y-height-60vh: 60vh;
    --y-height-70vh: 70vh;
    --y-height-80vh: 80vh;
    --y-height-90vh: 90vh;
    --y-height-100vh: 100vh;

    /* ===== BORDERS & SHADOWS ===== */

    /* Border Radius */
    --y-radius-3: 3px;
    --y-radius-5: 5px;
    --y-radius-8: 8px;
    --y-radius-16: 16px;
    --y-radius-20: 20px;
    --y-radius-24: 24px;
    --y-radius-50: 50px;
    --y-radius-full: 50%;

    /* Border Width */
    --y-border-1: 1px;
    --y-border-2: 2px;
    --y-border-3: 3px;

    /* Outline */
    --y-outline-2: 2px;

    /* Shadows */
    --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 & TRANSITIONS ===== */
    --y-transition-02s: all 0.2s ease;
    --y-transition-03s: all 0.3s ease;
    --y-transition-025s: all 0.25s ease;
    --y-transition-05s: all 0.5s ease;
    --y-transition-1s: all 1s ease;
    --y-transition-dropdown: opacity 0.2s ease, transform 0.2s ease;
    --y-transition-mobile: transform 0.3s ease, opacity 0.3s ease;
    --y-transition-default: all 0.2s ease;
    --y-transition-expand: all 1s cubic-bezier(0.25, 1, 0.5, 1);

    /* Transforms */
    --y-transform-up-2: -2px;
    --y-scale-105: 1.05;
    --y-scale-110: 1.1;
    --y-translate-x-10: translateX(10px);

    /* ===== Z-INDEX LAYERS ===== */
    --y-z-2: 2;
    --y-z-100: 100;
    --y-z-200: 200;
    --y-z-500: 500;
    --y-z-1000: 1000;
    --y-z-1001: 1001;
    --y-z-1002: 1002;
}