:root {
    /* Primary palette - черно-белый комиксный стиль */
    --color-primary: #000000;      /* Чистый чёрный */
    --color-secondary: #32373c;    /* Тёмный серый (как на menshairstylestoday.com) */
    --color-accent: #e5e5e5;       /* Светло-серый для акцентов */
    --color-background: #ffffff;   /* Чистый белый фон */
    --color-text: #1a1a1a;         /* Почти чёрный текст */
    --color-light: #f5f5f5;        /* Очень светлый серый */
    --color-dark: #0a0a0a;         /* Глубокий чёрный для теней */

    /* Grays - минималистичные оттенки */
    --color-gray-50: #fafafa;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #e5e5e5;
    --color-gray-300: #d4d4d4;
    --color-gray-600: #525252;
    --color-gray-700: #404040;
    --color-gray-800: #262626;

    /* Comic-style accents */
    --color-border: #000000;       /* Чёрные границы */
    --color-hover: #ffffff;        /* Белый для hover */
    --color-button-bg: #000000;    /* Чёрный фон кнопок */
    --color-button-text: #ffffff;  /* Белый текст кнопок */

    /* Fonts — чёткие, комиксные */
    --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
    --font-heading: 'Poppins', 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', 'Consolas', monospace;

    /* Layout */
    --max-width: 1200px;
    --sidebar-width: 300px;
    --border-radius: 0;            /* Острые углы для комиксного стиля */
    --border-radius-button: 9999px; /* Скругленные кнопки как на референсе */
    --spacing: 1rem;

    /* Shadows — комиксный стиль со смещением */
    --shadow-sm: -4px 4px 0 0 var(--color-border);
    --shadow-md: -8px 8px 0 0 var(--color-border);
    --shadow-lg: -15px 15px 0 0 var(--color-border);
    --shadow-xl: -20px 20px 0 0 var(--color-border);

    /* Button shadow - двойной эффект */
    --shadow-button: -8px 8px 0 0 #e1e1e1, -6px 6px 0 0 #fff inset;

    /* Borders — жирные линии в комиксном стиле */
    --border-thin: 1px solid var(--color-border);
    --border-thick: 2px solid var(--color-border);
    --border-heavy: 3px solid var(--color-border);

    /* Transitions — быстрые, резкие */
    --transition-fast: 100ms ease;
    --transition-normal: 200ms ease;
    --transition-slow: 300ms ease;
}