/* ====================================================================
   ScreenVision — Modern E-Commerce Design System Tokens
   Vibrant Orange, Pure White, Slate Neutrals & Sky Blue Accents
   ==================================================================== */

:root {
    /* 🏛️ Core Color Palette - Modern Clean Foundation */
    --color-bg-main: #F8FAFC;          /* Clean Light Gray/Slate */
    --color-bg-surface: #FFFFFF;       /* Pure Crisp White */
    --color-bg-subtle: #F1F5F9;        /* Soft Slate Tint */
    --color-bg-card: #FFFFFF;
    --color-bg-card-hover: #FFFFFF;
    --color-bg-dark: #0F172A;          /* Deep Slate/Charcoal */
    --color-bg-dark-surface: #1E293B;  /* Dark Slate */
    --color-bg-glass: rgba(255, 255, 255, 0.94);
    --color-bg-glass-dark: rgba(15, 23, 42, 0.95);

    /* ⚡ Vibrant Brand Orange Palette (Matching Designs) */
    --color-primary: #FF5B00;          /* Hero Vibrant Orange */
    --color-primary-hover: #E0480C;    /* Deeper Active Orange */
    --color-primary-dark: #C23805;
    --color-primary-light: #FFF3ED;    /* Soft Orange Tint */
    --color-primary-subtle: rgba(255, 91, 0, 0.08);
    --color-primary-border: rgba(255, 91, 0, 0.25);
    --color-primary-glow: 0 4px 20px rgba(255, 91, 0, 0.28);
    --color-primary-gradient: linear-gradient(135deg, #FF6B1A 0%, #FF5B00 50%, #E0480C 100%);

    /* 🌊 Sky Blue Top Bar & Badges */
    --color-sky-bar: #0284C7;
    --color-sky-light: #E0F2FE;
    --color-sky-dark: #0369A1;

    /* ✒️ Typography & High-Contrast Neutrals */
    --color-text-primary: #0F172A;     /* Deep Slate Text */
    --color-text-secondary: #475569;   /* Neutral Gray */
    --color-text-muted: #94A3B8;       /* Subtle Gray */
    --color-text-light: #FFFFFF;       /* White */

    /* 🪟 Borders & Separators */
    --color-border-subtle: #E2E8F0;
    --color-border-medium: #CBD5E1;
    --color-border-dark: #334155;

    /* 🟢 Functional Status Colors */
    --color-success: #16A34A;
    --color-success-bg: #DCFCE7;
    --color-danger: #DC2626;
    --color-danger-bg: #FEE2E2;
    --color-warning: #D97706;
    --color-warning-bg: #FEF3C7;
    --color-info: #0284C7;
    --color-info-bg: #E0F2FE;

    /* 🔤 Modern Arabic & English Typography */
    --font-primary: 'Plus Jakarta Sans', 'Alexandria', 'Readex Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Plus Jakarta Sans', 'Alexandria', -apple-system, BlinkMacSystemFont, sans-serif;

    /* 📐 Radii */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* 🌌 Elevation & Shadows */
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.03);
    --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.08), 0 4px 10px rgba(15, 23, 42, 0.04);
    --shadow-card: 0 2px 10px rgba(15, 23, 42, 0.04);
    --shadow-card-hover: 0 14px 30px rgba(15, 23, 42, 0.10);
    --shadow-orange: 0 8px 24px rgba(255, 91, 0, 0.25);

    /* ⚡ Transitions */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);

    /* 📱 Dimensions */
    --header-height-mobile: 60px;
    --header-height-desktop: 76px;
    --bottom-nav-height: 62px;
    --container-max-width: 1340px;
    --mobile-tap-target: 48px;
}