/* ========== CSS Variables ========== */
:root {
    /* Цвета */
    --color-bg: #fcfcfc;
    --color-bg-alt: #f8f8f8;
    --color-white: #ffffff;
    --color-text: #1a1a1a;
    --color-text-light: #5a5a5a;
    --color-muted: #a4a4a4;
    --color-border: #f1f1f1;
    --color-black: #000000;
    --color-accent: #f2994b;
    --color-accent-dark: #e07c2c;
    --color-star: #ffc107;
    
    /* Skeleton Loader */
    --color-skeleton-start: #e0e0e0;
    --color-skeleton-end: #c0c0c0;
    
    /* Шрифты */
    --font-display: "Manrope", system-ui, sans-serif;
    --font-body: "Inter", system-ui, sans-serif;
    
    /* Размеры шрифтов (rem, база 16px) */
    --text-xs: 0.625rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.125rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-3xl: 2.5rem;
    --text-4xl: 3rem;
    --text-5xl: 3.5rem;
    
    /* Отступы (8px сетка в rem) */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;
    --spacing-24: 6rem;
    
    /* Радиусы */
    --radius-md: 0.5rem;
    --radius-lg: 1.5rem;
    --radius-pill: 2.5rem;
    --radius-round: 3.125rem;
    
    /* Размеры сайдбара */
    --sidebar-w: 6.25rem;
    
    /* Отступы страницы — единые для всего контента */
    --page-pad-x: 2rem;      /* 32px */
    --content-max: 80rem;    /* 1280px */
    
    /* Тени */
    --shadow-soft: 0 1px 0 rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    
    /* Анимации */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
}