/*==================================================
    VETNOL DESIGN SYSTEM
    File : assets/css/variables.css
==================================================*/

:root{

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

    --primary:#082C5C;
    --primary-light:#0D4B9A;
    --primary-dark:#041A37;

    --secondary:#2F7D1B;
    --secondary-light:#5AAE39;
    --secondary-dark:#215913;

    --accent:#14B8A6;
    --success:#22C55E;
    --warning:#F59E0B;
    --danger:#EF4444;
    --info:#3B82F6;

    /*====================================
                LIGHT THEME
    ====================================*/

    --bg:#F8FAFC;
    --surface:#FFFFFF;
    --surface-2:#F1F5F9;

    --text:#0F172A;
    --text-light:#475569;
    --border:#E2E8F0;

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

    --font-heading:'Poppins',sans-serif;
    --font-body:'Inter',sans-serif;

    --fs-xs:.75rem;
    --fs-sm:.875rem;
    --fs-md:1rem;
    --fs-lg:1.125rem;
    --fs-xl:1.25rem;
    --fs-2xl:1.5rem;
    --fs-3xl:1.875rem;
    --fs-4xl:2.25rem;
    --fs-5xl:3rem;
    --fs-6xl:3.75rem;

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

    --fw-light:300;
    --fw-normal:400;
    --fw-medium:500;
    --fw-semibold:600;
    --fw-bold:700;
    --fw-black:900;

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

    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:20px;
    --space-6:24px;
    --space-8:32px;
    --space-10:40px;
    --space-12:48px;
    --space-16:64px;
    --space-20:80px;
    --space-24:96px;

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

    --radius-xs:4px;
    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:16px;
    --radius-xl:20px;
    --radius-2xl:24px;
    --radius-3xl:32px;
    --radius-full:999px;

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

    --shadow-xs:
        0 1px 2px rgba(0,0,0,.05);

    --shadow-sm:
        0 2px 6px rgba(0,0,0,.08);

    --shadow-md:
        0 8px 20px rgba(0,0,0,.10);

    --shadow-lg:
        0 15px 35px rgba(0,0,0,.15);

    --shadow-xl:
        0 25px 60px rgba(0,0,0,.18);

    --shadow-glow:
        0 0 25px rgba(8,44,92,.30);

    /*====================================
                TRANSITIONS
    ====================================*/

    --transition-fast:.2s ease;
    --transition:.35s ease;
    --transition-slow:.6s ease;

    /*====================================
                Z-INDEX
    ====================================*/

    --z-dropdown:100;
    --z-sticky:500;
    --z-fixed:700;
    --z-modal:900;
    --z-loader:9999;

    /*====================================
                MAX WIDTHS
    ====================================*/

    --container-sm:640px;
    --container-md:768px;
    --container-lg:1024px;
    --container-xl:1280px;
    --container-2xl:1440px;

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

    --gradient-primary:
        linear-gradient(
            135deg,
            #082C5C,
            #0D4B9A
        );

    --gradient-secondary:
        linear-gradient(
            135deg,
            #2F7D1B,
            #5AAE39
        );

    --gradient-main:
        linear-gradient(
            135deg,
            #082C5C 0%,
            #0D4B9A 50%,
            #2F7D1B 100%
        );

    --glass-bg:
        rgba(255,255,255,.65);

    --glass-border:
        rgba(255,255,255,.35);

    --glass-blur:20px;

}

/*==================================================
                DARK THEME
==================================================*/

.dark{

    --bg:#0F172A;
    --surface:#162235;
    --surface-2:#1E293B;

    --text:#F8FAFC;
    --text-light:#CBD5E1;
    --border:#334155;

    --glass-bg:
        rgba(15,23,42,.70);

    --glass-border:
        rgba(255,255,255,.08);

    --shadow-glow:
        0 0 35px rgba(90,174,57,.25);

}

/*==================================================
            SYSTEM PREFERENCE
==================================================*/

@media (prefers-color-scheme: dark){

    html.system-theme{

        --bg:#0F172A;
        --surface:#162235;
        --surface-2:#1E293B;

        --text:#F8FAFC;
        --text-light:#CBD5E1;
        --border:#334155;

    }

}