* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary: #4f46e5;
            --primary-dark: color-mix(in srgb, var(--primary) 82%, black);
            --primary-light: color-mix(in srgb, var(--primary) 14%, white);
            --nav-color: #27422e;
            --accent: #f59e0b;
            --accent-light: #fef3c7;
            --success: #10b981;
            --success-light: #d1fae5;
            --danger: #ef4444;
            --danger-light: #fee2e2;
            --warning: #f59e0b;
            --warning-light: #fef3c7;
            --info: #3b82f6;
            --info-light: #dbeafe;
            --status-pending-bg: #fef3c7;
            --status-pending-text: #92400e;
            --status-preparing-bg: #dbeafe;
            --status-preparing-text: #1e40af;
            --status-completed-bg: #d1fae5;
            --status-completed-text: #065f46;
            --status-cancelled-bg: #fee2e2;
            --status-cancelled-text: #991b1b;
            --gray-50: #f9fafb;
            --gray-100: #f3f4f6;
            --gray-200: #e5e7eb;
            --gray-300: #d1d5db;
            --gray-400: #9ca3af;
            --gray-500: #6b7280;
            --gray-600: #4b5563;
            --gray-700: #374151;
            --gray-800: #1f2937;
            --gray-900: #111827;
            --radius-sm: 8px;
            --radius: 12px;
            --radius-lg: 16px;
            --radius-xl: 20px;
            --radius-2xl: 24px;
            --radius-full: 9999px;
            --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
            --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
            --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);
            --transition-fast: 150ms ease;
            --transition: 200ms ease;
            --transition-slow: 300ms ease;
            --safe-bottom: env(safe-area-inset-bottom, 0px);
            --safe-top: env(safe-area-inset-top, 0px);
            --header-height: 64px;
            --nav-height: 72px;
            --z-overlay-low: 400;
            --z-nav: 500;
            --z-drawer: 600;
            --z-drawer-top: 650;
            --z-sidebar: 700;
            --z-sidebar-top: 750;
            --z-modal: 800;
            --z-modal-top: 850;
            --z-dropdown: 900;
            --z-toast: 950;
            /* Dynamic viewport height - will be set by JavaScript for iOS */
            --app-height: 100vh;
            --app-height: 100dvh;
            --profile-sidebar-right: 0px;
        }