/* =====================================================
HESHAM TV
FILE: css/variables.css
DESIGN SYSTEM
===================================================== */

/* =====================================================
DARK THEME (DEFAULT)
===================================================== */

:root {


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

--primary: #00E5FF;

--primary-hover: #00C8E0;

--secondary: #7C3AED;

--secondary-hover: #6D28D9;

--success: #10B981;

--warning: #F59E0B;

--danger: #EF4444;

/* =====================================
   BACKGROUNDS
====================================== */

--bg-body: #0B1020;

--bg-surface: #111827;

--bg-card: #131C35;

--bg-card-hover: #1A2442;

--bg-input: #182238;

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

--text-primary: #FFFFFF;

--text-secondary: #CBD5E1;

--text-muted: #94A3B8;

/* =====================================
   BORDERS
====================================== */

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

--border-hover:
    rgba(255,255,255,.15);

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

--shadow-sm:
    0 4px 10px rgba(0,0,0,.15);

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

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

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

--gradient-primary:
    linear-gradient(
    135deg,
    #00E5FF,
    #7C3AED
);

--gradient-dark:
    linear-gradient(
    180deg,
    #0B1020,
    #111827
);

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

--font-family:
    "Poppins",
    sans-serif;

--font-size-xs: 12px;

--font-size-sm: 14px;

--font-size-md: 16px;

--font-size-lg: 18px;

--font-size-xl: 22px;

--font-size-2xl: 32px;

--font-size-3xl: 42px;

--font-size-4xl: 56px;

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

--fw-light: 300;

--fw-regular: 400;

--fw-medium: 500;

--fw-semibold: 600;

--fw-bold: 700;

--fw-extrabold: 800;

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

--radius-sm: 8px;

--radius-md: 14px;

--radius-lg: 20px;

--radius-xl: 30px;

--radius-full: 999px;

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

--space-xs: 8px;

--space-sm: 12px;

--space-md: 20px;

--space-lg: 30px;

--space-xl: 50px;

--space-2xl: 80px;

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

--transition-fast: .2s ease;

--transition-normal: .3s ease;

--transition-slow: .5s ease;

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

--container-width: 1280px;


}

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

[data-theme="light"] {


--bg-body: #F8FAFC;

--bg-surface: #FFFFFF;

--bg-card: #FFFFFF;

--bg-card-hover: #F1F5F9;

--bg-input: #FFFFFF;

--text-primary: #0F172A;

--text-secondary: #334155;

--text-muted: #64748B;

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

--border-hover:
    rgba(0,0,0,.15);

--shadow-sm:
    0 4px 10px rgba(0,0,0,.08);

--shadow-md:
    0 10px 25px rgba(0,0,0,.12);

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


}

/* =====================================================
BREAKPOINTS
===================================================== */

/*

Mobile:
0 → 767px

Tablet:
768 → 1023px

Laptop:
1024 → 1279px

Desktop:
1280+

*/

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

:root {


--z-dropdown: 1000;

--z-sticky: 1100;

--z-fixed: 1200;

--z-modal: 1300;

--z-toast: 1400;


}

/* =====================================================
FUTURE VARIABLES
===================================================== */

/*

يمكن مستقبلاً إضافة:

--chart-color

--premium-gold

--vip-gradient

--seasonal-theme

بدون تعديل أي ملف CSS آخر

*/