/*==================================================
            BUYREX DESIGN SYSTEM
        Sirf CSS custom properties (--variables) —
        koi actual styling rules yahan nahi hain.
        Ye file HTML mein style.css se PEHLE load
        honi chahiye, warna --var undefined ayenge.

        Actual component styles -> style.css
        Mobile screen size adjustments -> responsive.css
==================================================*/

:root {

    /*==================================
            BRAND COLORS
==================================*/

    --primary: #0F172A;
    --primary-light: #1E293B;

    --secondary: #F97316;
    --secondary-hover: #EA580C;

    --accent: #FDBA74;

    --success: #22C55E;
    --warning: #FACC15;
    --danger: #EF4444;


    /*==================================
            BACKGROUND
==================================*/

    --body: #E2E8F0;

    --white: #FFFFFF;

    --card: #FFFFFF;

    --surface: #F1F5F9;

    --overlay: rgba(15, 23, 42, .45);


    /*==================================
            TEXT
==================================*/

    --title: #192335;

    --title-2:#1d2d49;

    --text: #475569;

    --text-light: #64748B;

    --text-muted: #94A3B8;

    --white-text: #FFFFFF;


    /*==================================
            BORDER
==================================*/

    --border: #E2E8F0;

    --border-light: #F1F5F9;


    /*==================================
            SHADOWS
==================================*/

    --shadow-xs:
        0 2px 5px rgba(15, 23, 42, .04);

    --shadow-sm:
        0 5px 15px rgba(15, 23, 42, .06);

    --shadow-md:
        0 12px 30px rgba(15, 23, 42, .08);

    --shadow-lg:
        0 25px 60px rgba(15, 23, 42, .12);

    --shadow-orange:
        0 15px 30px rgba(249, 115, 22, .25);

    --shadow-navyblue: 0 15px 30px rgba(9, 23, 45, 0.25);


    /*==================================
            GRADIENTS
==================================*/

    --gradient-primary:
        linear-gradient(135deg,
            #0F172A,
            #1E293B);
            
    --gradient-orange:
        linear-gradient(135deg,
        #fb5801,
        #f56402
    );        
    --gradient-card:
        linear-gradient(180deg,
            #FFFFFF,
            #F8FAFC);


    /*==================================
            FONT
==================================*/

    --font: 'Poppins', sans-serif;


    /*==================================
            FONT SIZE
==================================*/

    --fs-10: 10px;
    --fs-12: 12px;
    --fs-14: 14px;
    --fs-16: 16px;
    --fs-18: 18px;
    --fs-20: 20px;
    --fs-24: 24px;
    --fs-28: 28px;
    --fs-34: 34px;


    /*==================================
            FONT WEIGHT
==================================*/

    --fw-300: 300;
    --fw-400: 400;
    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;
    --fw-800: 800;


    /*==================================
            BORDER RADIUS
==================================*/

    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-circle: 50%;
    --radius-pill: 999px;


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

    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-30: 30px;
    --space-40: 40px;


    /*==================================
            LAYOUT
==================================*/

    --mobile-width: 390px;

    --header-height: 70px;

    --bottom-nav: 74px;


    /*==================================
            TRANSITION
==================================*/

    --transition: all .30s ease;

}