:root {
    /* Layout */
    --top-bar-height: 52px;
    --nav-bar-height: 42px;
    --header-total-height: calc(var(--top-bar-height) + var(--nav-bar-height));

    /* Z-index scale */
    --z-base: 1;
    --z-handles: 20;
    --z-rotate: 30;
    --z-mobile-footer: 100;
    --z-topbar: 200;
    --z-basket-overlay: 250;
    --z-login-backdrop: 299;
    --z-drawer: 300;

    /* Colors */
    --color-primary: #667eea;
    --color-primary-dark: #764ba2;
    --color-primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --color-success: #16a34a;
    --color-success-light: #dcfce7;
    --color-error: #dc2626;
    --color-error-light: #fee2e2;
    --color-warning: #d97706;
    --color-warning-light: #fef3c7;
    --color-info: #2563eb;
    --color-info-light: #dbeafe;
    --color-border: #e0e0e0;
    --color-surface: #f1f5f9;
    --color-text: #1e293b;
    --color-text-muted: #64748b;
    --color-white: #ffffff;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    /* Borders */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;

    /* Shadows */
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);

    /* Transitions */
    --transition: all 0.2s ease;
    --transition-fast: all 0.15s ease;

    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-size-sm: 0.75rem;
    --font-size-base: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
}