/* ============================================================ ДИЗАЙН-СИСТЕМА — CSS-ПЕРЕМЕННЫЕ (TOKENS) Супрематизм Казимира Малевича ============================================================ Как этим пользоваться: 1. Все цвета, шрифты, размеры заданы здесь, в :root 2. Хочешь изменить тему — меняй значения здесь 3. Хочешь новую тему — скопируй :root, переименуй в .theme-dark, добавь класс на ============================================================ */ :root { /* -------------------------------------------------------- ЦВЕТОВАЯ ПАЛИТРА Основа: абсолютный чёрный, белый, красный акцент. Дополнительные: жёлтый, синий для геометрических форм. -------------------------------------------------------- */ --color-bg: #FDFEFE; /* Белый фон страницы */ --color-bg-alt: #F5F5F5; /* Альтернативный фон (серый) */ --color-black: #000000; /* Абсолютный чёрный */ --color-black-soft: #1A1A1A; /* Чёрный для текста (чуть мягче) */ --color-red: #E32636; /* Супрематистский красный */ --color-red-dark: #B81D2A; /* Тёмно-красный для ховера */ --color-yellow: #F4D03F; /* Жёлтый квадрат */ --color-blue: #2874A6; /* Синий прямоугольник */ --color-gray: #888888; /* Серый для второстепенного */ --color-light-gray: #CCCCCC; /* Светло-серый для рамок */ --color-dark-gray: #333333; /* Тёмно-серый */ /* -------------------------------------------------------- ТИПОГРАФИКА display — для крупных заголовков (жирный рубленый) body — для текста mono — для технического текста -------------------------------------------------------- */ --font-display: "Arial Black", "Helvetica Neue", "PT Sans", sans-serif; --font-body: "Helvetica Neue", "PT Sans", "Arial", sans-serif; --font-mono: "Courier New", "Consolas", monospace; --font-size-xs: 11px; --font-size-sm: 13px; --font-size-md: 15px; --font-size-lg: 18px; --font-size-xl: 24px; --font-size-2xl: 36px; --font-size-3xl: 48px; --line-height: 1.5; --letter-spacing: 1px; /* -------------------------------------------------------- ГЕОМЕТРИЯ -------------------------------------------------------- */ --border-thick: 3px; --border-thin: 2px; --spacing-unit: 8px; --space-xs: calc(var(--spacing-unit) * 1); /* 8px */ --space-sm: calc(var(--spacing-unit) * 2); /* 16px */ --space-md: calc(var(--spacing-unit) * 3); /* 24px */ --space-lg: calc(var(--spacing-unit) * 4); /* 32px */ --space-xl: calc(var(--spacing-unit) * 6); /* 48px */ --space-2xl: calc(var(--spacing-unit) * 10); /* 80px */ /* -------------------------------------------------------- ТЕНИ — для парящих блоков -------------------------------------------------------- */ --shadow-float: 8px 12px 28px rgba(0,0,0,0.10); --shadow-float-hover: 12px 18px 36px rgba(0,0,0,0.18); --shadow-float-strong: 14px 20px 40px rgba(0,0,0,0.14); /* -------------------------------------------------------- КОМПОНЕНТЫ -------------------------------------------------------- */ --header-height: 60px; --footer-height: 120px; --max-width: 1100px; /* Максимальная ширина контента */ --border-radius: 0px; /* Супрематизм — прямые углы! */ --accent-size: 32px; /* Красный угол/акцент */ } /* ============================================================ ТЁМНАЯ ТЕМА (заготовка — включишь, когда захочешь) Чтобы включить: добавь на class="theme-dark" ============================================================ */ .theme-dark { --color-bg: #1A1A1A; --color-bg-alt: #222222; --color-black: #FFFFFF; --color-black-soft: #E0E0E0; --color-dark-gray: #CCCCCC; --color-gray: #777777; --color-light-gray: #444444; }