:root {
    /* Colors - Modern vibrant palette */
    --primary: #FF4D4D;
    --primary-rgb: 255, 77, 77;
    --primary-dark: #cc3d3d;
    --primary-light: rgba(var(--primary-rgb), 0.1);
    --primary-gradient: linear-gradient(135deg, var(--primary) 0%, #FF7676 100%);
    
    --secondary: #1a1b2e;
    --secondary-light: #2b2d42;
    
    --accent: #F4A261;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;

    /* Neutrals - Sophisticated grays */
    --white: #FFFFFF;
    --black: #0F172A;
    --gray-50: #F8FAFC;
    --gray-100: #F1F5F9;
    --gray-200: #E2E8F0;
    --gray-300: #CBD5E1;
    --gray-400: #94A3B8;
    --gray-500: #64748B;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1E293B;
    --gray-900: #0F172A;

    /* Backgrounds */
    --bg-body: var(--gray-50);
    --bg-card: var(--white);
    --bg-nav: rgba(255, 255, 255, 0.85);

    /* Typography */
    --font-main: 'Inter', system-ui, -apple-system, sans-serif;
    --font-display:  'Inter', sans-serif; /* For titles if we add it */

    /* Shadows - Layered for depth */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    --shadow-primary: 0 10px 20px -5px rgba(var(--primary-rgb), 0.4);

    /* Borders */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 9999px;
    
    --border-light: 1px solid var(--gray-100);
    --border-base: 1px solid var(--gray-200);

    /* Desktop Layout */
    --header-height: 80px;
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 88px;
    --container-max: 1400px;
    --content-padding: 40px;
    --cart-sidebar-width: 420px;

    /* Z-index layers */
    --z-sidebar: 900;
    --z-header: 1000;
    --z-cart-sidebar: 1100;
    --z-modal: 2000;
    --z-toast: 2500;
    --z-loading: 3000;

    /* Transitions */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}