/*
 * Design Tokens — Автобус Валера
 * Single source of truth for colors, spacing, typography, z-index.
 */
:root {
    /* === Brand Colors === */
    --color-primary: #3498db;
    --color-secondary: #2c3e50;
    --color-accent: #e74c3c;
    --color-valera: #4a90e2;
    --color-aurora: #ff6b9d;

    /* === Neutral Colors === */
    --color-text: #2c3e50;
    --color-text-muted: #6c757d;
    --color-bg: #ffffff;
    --color-bg-light: #f8f9fa;
    --color-border: #dee2e6;

    /* === Status Colors === */
    --color-success: #28a745;
    --color-warning: #ffc107;
    --color-danger: #dc3545;
    --color-info: #17a2b8;

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

    /* === Typography === */
    --font-family: 'Poppins', sans-serif;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;

    /* === Border Radius === */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 15px;
    --radius-xl: 20px;
    --radius-pill: 25px;

    /* === Shadows === */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 5px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);

    /* === Z-Index (from Phase 1) === */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-navbar: 300;
    --z-cart: 350;
    --z-overlay: 400;
    --z-menu: 450;
    --z-modal: 500;
    --z-cookie: 550;
    --z-toast: 600;

    /* === Legacy Aliases (backward-compat with base.css & templates) === */
    --primary-color: var(--color-primary);
    --secondary-color: var(--color-secondary);
    --accent-color: var(--color-accent);
    --text-color: var(--color-text);
    --light-bg: var(--color-bg-light);
    --border-color: var(--color-border);
    --valera-color: var(--color-valera);
    --aurora-color: var(--color-aurora);

    /* === Breakpoints (reference only, can't use in media queries) === */
    /* --bp-sm: 576px; --bp-md: 768px; --bp-lg: 992px; --bp-xl: 1200px; */
}