/* ==========================================================
   BiiMedia Design System
   variables.css
========================================================== */

:root {

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

    --color-primary: #4D7CFF;
    --color-primary-light: #9FC3FF;
    --color-primary-soft: #C4DAFF;

    --color-accent: #FF7A2E;
    --color-accent-light: #FFB27C;

    --color-white: #FFFFFF;
    --color-off-white: #F8FAFC;

    --color-text: #E8EDF7;
    --color-text-muted: #A5B2C6;

    --color-bg: #030B16;
    --color-bg-secondary: #081729;
    --color-bg-card: rgba(12,25,44,.72);

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

	--color-accent:#F28C28;
	--color-accent-light:#FFB35C;



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

    --gradient-main:
        radial-gradient(
            circle at center,
            rgba(120,170,255,.55) 0%,
            rgba(54,96,170,.28) 30%,
            rgba(7,20,39,0) 68%
        );

    --gradient-blue:
        linear-gradient(
            180deg,
            #0A1830 0%,
            #030B16 100%
        );

    --gradient-accent:
        linear-gradient(
            135deg,
            #4D7CFF,
            #78AAFF
        );

	--accent-gradient:
    	linear-gradient(
			135deg,
			#F28C28 0%,
			#FFB35C 100%
		);


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

    --shadow-sm:
        0 8px 24px rgba(0,0,0,.15);

    --shadow-md:
        0 15px 50px rgba(0,0,0,.25);

    --shadow-lg:
        0 30px 80px rgba(0,0,0,.45);




    /* ==========================================
       GLOW
    ========================================== */

    --glow-blue:
        0 0 40px rgba(77,124,255,.45);

    --glow-orange:
        0 0 35px rgba(255,122,46,.35);




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

    --radius-xs: 6px;
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 26px;
    --radius-xl: 40px;
    --radius-round: 999px;




    /* ==========================================
       CONTAINER
    ========================================== */

    --container-xs: 720px;
    --container-sm: 900px;
    --container: 1320px;
    --container-wide: 1480px;



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

    --space-xxs: .5rem;
    --space-xs: .75rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 5rem;
    --space-3xl: 7rem;
    --space-4xl: 10rem;




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

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




    /* ==========================================
       HEADER
    ========================================== */

    --header-height: 88px;




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

    --z-menu: 100;
    --z-header: 500;
    --z-overlay: 900;
    --z-modal: 9999;

}