/* css/variables.css - Blockout Design System (Fusion) */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap');

:root {
    /* Brand Colors */
    --primary: #A71C20;
    --primary-light: rgba(167, 28, 32, 0.1);
    --primary-hover: #8C1619;
    
    --success: #1E6B47;
    --warning: #F59E0B;
    --danger: #A71C20;
    --info: #007AFF;
    --danger-bg: rgba(167, 28, 32, 0.08);
    --warning-bg: rgba(245, 158, 11, 0.12);

    /* Backgrounds & Surfaces */
    --bg-app: #F7F8FA;
    --bg-surface: #FFFFFF;
    --bg-surface-hover: #F3F4F6;
    --bg-surface-elevated: #FFFFFF;

    /* Atmosphere */
    --atmosphere-1: rgba(167, 28, 32, 0.14);
    --atmosphere-2: rgba(30, 107, 71, 0.10);
    --atmosphere-3: rgba(245, 158, 11, 0.08);
    --atmosphere-pattern: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23A71C20' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

    /* Typography */
    --text-primary: #111827;
    --text-secondary: #4B5563;
    --text-tertiary: #9CA3AF;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-3xl: 1.875rem;

    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    /* Borders & Shadows */
    --border-color: #E5E7EB;
    --border-color-strong: #D1D5DB;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-soft: 0 8px 24px rgba(17, 24, 39, 0.06);
    --shadow-md: 0 10px 24px -6px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 18px 40px -12px rgba(0, 0, 0, 0.18);
    
    /* Layout / Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    --z-nav: 1000;
    --z-modal: 2000;
    --z-toast: 3000;

    /* Animations */
    --transition-fast: 0.15s ease-in-out;
    --transition-normal: 0.3s ease-in-out;
    --transition-spring: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* Fonts */
    --font-ar: 'Cairo', sans-serif;
    --font-en: 'Cairo', sans-serif;
    
    /* Global Elements */
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-blur: blur(14px);
    --glass-border: rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] {
    --primary: #E23B3F;
    --primary-light: rgba(226, 59, 63, 0.16);
    --primary-hover: #FF5A5F;
    --bg-app: #0E0E10;
    --bg-surface: #18181B;
    --bg-surface-hover: #242428;
    --bg-surface-elevated: #1F1F23;
    --text-primary: #F4F4F5;
    --text-secondary: #A1A1AA;
    --text-tertiary: #71717A;
    --border-color: #2A2A30;
    --border-color-strong: #3F3F46;
    --shadow-soft: 0 8px 28px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 12px 28px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
    --atmosphere-1: rgba(226, 59, 63, 0.22);
    --atmosphere-2: rgba(30, 107, 71, 0.16);
    --atmosphere-3: rgba(59, 130, 246, 0.12);
    --atmosphere-pattern: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    --glass-bg: rgba(24, 24, 27, 0.78);
    --glass-border: rgba(255, 255, 255, 0.08);
}