/* ============================================
   Dzrto Web - CSS Variables
   Based on Dzrto UI Flutter App Theme
   ============================================ */

:root {
    /* Primary Colors - Purple Theme */
    --primary: #A264BC;
    --primary-light: #B87FCE;
    --primary-dark: #8B4FA6;
    --primary-rgb: 162, 100, 188;

    /* Secondary Colors */
    --secondary: #F7613B;
    --secondary-light: #FF8A65;
    --secondary-dark: #E5502A;

    /* Accent Colors */
    --accent: #F9F3FB;
    --accent-light: #FCF8FD;

    /* Neutral Colors */
    --white: #FFFFFF;
    --black: #1A1A2E;
    --grey: #9E9E9E;
    --light-grey: #F8F8F8;
    --medium-grey: #E8E8E8;
    --dark-grey: #616161;

    /* Background Colors */
    --background: #FFFFFF;
    --scaffold-background: #FFFFFF;
    --card-background: #FFFFFF;
    --surface: #FFFFFF;

    /* Status Colors */
    --success: #22C55E;
    --success-light: #DCFCE7;
    --error: #EF4444;
    --error-light: #FEE2E2;
    --warning: #FBBF24;
    --warning-light: #FEF3C7;
    --info: #3B82F6;
    --info-light: #DBEAFE;

    /* Order Status Colors */
    --status-pending: #FBBF24;
    --status-confirmed: #3B82F6;
    --status-preparing: #A264BC;
    --status-ready: #06B6D4;
    --status-delivering: #A264BC;
    --status-delivered: #22C55E;
    --status-cancelled: #EF4444;

    /* Gradients */
    --primary-gradient: linear-gradient(135deg, #A264BC 0%, #B87FCE 100%);
    --secondary-gradient: linear-gradient(135deg, #F7613B 0%, #FF8A65 100%);
    --accent-gradient: linear-gradient(135deg, #F7613B 0%, #FF8A65 100%);
    --promo-gradient: linear-gradient(135deg, #1A1A2E 0%, #2D2D44 100%);
    --overlay-gradient: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.7) 100%);

    /* Typography */
    --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-arabic: 'Cairo', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Font Sizes */
    --text-xs: 0.75rem;
    /* 12px */
    --text-sm: 0.875rem;
    /* 14px */
    --text-base: 1rem;
    /* 16px */
    --text-lg: 1.125rem;
    /* 18px */
    --text-xl: 1.25rem;
    /* 20px */
    --text-2xl: 1.5rem;
    /* 24px */
    --text-3xl: 1.875rem;
    /* 30px */
    --text-4xl: 2.25rem;
    /* 36px */

    /* Font Weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Spacing */
    --spacing-xs: 0.25rem;
    /* 4px */
    --spacing-sm: 0.5rem;
    /* 8px */
    --spacing-md: 1rem;
    /* 16px */
    --spacing-lg: 1.5rem;
    /* 24px */
    --spacing-xl: 2rem;
    /* 32px */
    --spacing-2xl: 3rem;
    /* 48px */

    /* Border Radius */
    --radius-sm: 0.375rem;
    /* 6px */
    --radius-md: 0.5rem;
    /* 8px */
    --radius-lg: 0.75rem;
    /* 12px */
    --radius-xl: 1rem;
    /* 16px */
    --radius-2xl: 1.5rem;
    /* 24px */
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-button: 0 4px 14px rgba(162, 100, 188, 0.4);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;
    --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Z-Index Scale */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-toast: 800;

    /* Layout */
    --header-height: 64px;
    --bottom-nav-height: 64px;
    --sidebar-width: 280px;
    --max-content-width: 1200px;
    --mobile-padding: 16px;

    /* Safe Areas (iOS) */
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
}

/* Dark Mode Variables (for future use) */
[data-theme="dark"] {
    --background: #1A1A2E;
    --scaffold-background: #121220;
    --card-background: #2D2D44;
    --surface: #2D2D44;
    --black: #FFFFFF;
    --light-grey: #2D2D44;
    --medium-grey: #3D3D54;
}

/* RTL (Arabic) specific adjustments */
[dir="rtl"] {
    --font-primary: var(--font-arabic);
}