/* ============================================================ ДИЗАЙН-ТОКЕНЫ — карта цветов и размеров. ЦВЕТА живут в двух плоских блоках ниже: «ТЕМА — СВЕТЛАЯ» и «ТЕМА — ТЁМНАЯ». Список имён в них ОДИНАКОВЫЙ и в одном порядке, у каждого токена — литеральное значение (hex / rgb), без var()-цепочек. Поменять цвет = найти строку в нужной теме и переписать значение. Ни один файл со стилями при этом не трогается. Активная тема — атрибут data-theme на . Его ставит встроенный скрипт в Base.astro до первой отрисовки (иначе моргала бы чужая тема). Без JS остаётся светлая. СИНОНИМЫ — исторические дубли одного цвета под двумя именами. Значения обязаны совпадать в обеих темах, менять ПАРОЙ: --color-bg = --surface-canvas --color-text = --text-primary --color-text-soft = --text-secondary --color-danger = --state-danger --color-accent-dark = --accent-primary (он же палитра --color-amber-400) --color-white = --surface-hover (имя историческое: это НЕ белый, а тёмный полупрозрачный wash) --color-overlay = --surface-overlay --glass-surface = --surface-glass --glass-border = --border-strong АДМИНКА. Токены --admin-* — там, где оформление админ-панели намеренно отличается от сайта: свой оливковый акцент (не золотой) и несколько поверхностей, у которых тёмная тема темнее/зеленее сайтовой. Меняются независимо от набора сайта. ============================================================ */ /* ---------- ПАЛИТРА — сырые оттенки, от темы не зависят ---------- */ :root { --color-amber-400: #c8a85a; /* тот же золотой, что --accent-primary */ --color-bone-50: #f3eedf; --color-bone-100: #e9e2d2; --color-moss-700: #4e572c; --color-olive-800: #2a301b; --color-olive-900: #232422; --color-olive-950: #34352e; --color-sage-500: #8b9269; --color-taupe-300: #b9aa8c; } /* ---------- РАЗМЕРЫ, ШРИФТЫ, СЛОИ — не про цвет ---------- */ :root { --container: 1200px; --container-pad: 20px; --font-heading: 'Fira Sans Extra Condensed', 'Arial Narrow', Arial, sans-serif; --font-main: 'Fira Sans', Arial, sans-serif; --lh-base: 1.6; --radius-xs: 8px; --radius-s: 10px; --radius-sm: 3px; --radius-md: 8px; --radius-ld: 12px; --radius-xl: 16px; --radius-m: 18px; --radius-l: 28px; --radius-pill: 999px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --text-base: 1rem; --tr-base: 0.3s ease; --tr-fast: 0.18s ease; --z-header: 100; --z-modal: 1000; --z-toast: 1100; } /* ============================================================ ТЕМА — СВЕТЛАЯ (по умолчанию) ============================================================ */ :root { --accent-primary: #c8a85a; --accent-primary-contrast: #1e2314; --accent-primary-hover: #9a7526; --accent-soft: rgb(200 168 90 / 16%); --admin-accent: #6f7650; --admin-accent-contrast: #fffdf7; --admin-accent-soft: rgb(111 118 80 / 12%); --admin-bg: #f6f1e7; --admin-canvas: #f6f1e7; --admin-chrome: #fffdf7; /* шапка/футер модалки */ --admin-chrome-shadow: rgb(30 35 20 / 10%); /* тень под/над плашкой модалки */ --admin-glass-border: rgb(30 35 20 / 12%); --admin-glass-surface: rgb(255 253 247 / 76%); --admin-info: #9a7526; --admin-pill: #efe9dd; /* пилюля-переключатель (база) */ --admin-success: #3f5741; --admin-success-soft: rgb(103 163 108 / 18%); --admin-surface: #fffdf7; --admin-track: #e6e1d3; /* канавка под вкладками-фильтрами */ --border-strong: rgb(30 35 20 / 22%); --border-subtle: rgb(30 35 20 / 12%); --color-accent: #9a7526; --color-accent-blue: rgba(36, 87, 245, .68); --color-accent-blue-contrast: #fffdf7; --color-accent-blue-soft: rgba(36, 87, 245, .14); --color-accent-dark: #c8a85a; --color-bg: #f6f1e7; --color-border: rgb(30 35 20 / 12%); --color-danger: #b4483c; --color-overlay: rgb(30 35 20 / 42%); --color-text: #24251d; --color-text-soft: #5f6350; --color-white: rgb(30 35 20 / 7%); --glass-border: rgb(30 35 20 / 22%); --glass-highlight: rgb(255 255 255 / 62%); --glass-surface: rgb(255 253 247 / 76%); --glass-surface-strong: rgb(255 253 247 / 94%); --media-control-border: rgb(255 255 255 / 20%); --media-control-surface: rgb(30 35 20 / 72%); --media-control-surface-hover: rgb(30 35 20 / 86%); --media-control-text: #f3eedf; --menu-danger: #b4483c; --menu-danger-surface: rgb(180 72 60 / 12%); --menu-item-hover: rgb(30 35 20 / 7%); --menu-surface: rgb(255 253 247 / 94%); --shadow-card: 0 14px 34px rgb(30 35 20 / 10%); --shadow-modal: 0 24px 70px rgb(30 35 20 / 24%); --state-danger: #b4483c; --state-danger-soft: rgb(180 72 60 / 12%); --state-success: #3f5741; --state-success-soft: rgb(63 87 65 / 12%); --surface-canvas: #f6f1e7; --surface-card: rgb(255 253 247 / 82%); --surface-glass: rgb(255 253 247 / 76%); --surface-hover: rgb(30 35 20 / 7%); --surface-input: rgb(255 253 247 / 76%); --surface-menu: rgb(255 253 247 / 94%); --surface-overlay: rgb(30 35 20 / 42%); --surface-panel: #fffdf7; --surface-raised: #fffaf0; --text-faint: rgb(30 35 20 / 42%); --text-inverse: #f3eedf; --text-muted: #7c7663; --text-on-image: #f3eedf; --text-primary: #24251d; --text-secondary: #5f6350; } /* ============================================================ ТЕМА — ТЁМНАЯ ============================================================ */ :root[data-theme='dark'] { --accent-primary: #c8a85a; --accent-primary-contrast: #1e2314; --accent-primary-hover: #e9d38a; --accent-soft: rgb(200 168 90 / 18%); --admin-accent: #8b9269; --admin-accent-contrast: #34352e; --admin-accent-soft: rgb(139 146 105 / 16%); --admin-bg: #42433a; --admin-canvas: #34352e; --admin-chrome: #22231f; /* шапка/футер модалки */ --admin-chrome-shadow: #131605; /* тень под/над плашкой модалки */ --admin-glass-border: rgb(233 226 210 / 24%); --admin-glass-surface: rgb(43 44 42 / 92%); --admin-info: #eeb731; --admin-pill: #3b3c2e; /* пилюля-переключатель (база) */ --admin-success: #1ec72a; --admin-success-soft: rgb(103 163 108 / 18%); --admin-surface: #232422; --admin-track: #54564b; /* канавка под вкладками-фильтрами */ --border-strong: rgb(233 226 210 / 24%); --border-subtle: rgb(233 226 210 / 16%); --color-accent: #8b9269; --color-accent-blue: rgba(36, 87, 245, .78); --color-accent-blue-contrast: #fffdf7; --color-accent-blue-soft: rgba(36, 87, 245, .22); --color-accent-dark: #c8a85a; --color-bg: #2a2d1f; --color-border: rgb(90 88 85 / 16%); --color-danger: #e74c3c; --color-overlay: rgb(21 23 13 / 72%); --color-text: #e9e2d2; --color-text-soft: #86827b; --color-white: rgb(243 238 223 / 8%); --glass-border: rgb(233 226 210 / 24%); --glass-highlight: rgb(255 255 255 / 12%); --glass-surface: rgb(42 48 27 / 54%); --glass-surface-strong: rgb(43 44 42 / 92%); --media-control-border: rgb(233 226 210 / 18%); --media-control-surface: rgb(42 48 27 / 76%); --media-control-surface-hover: rgb(42 48 27 / 92%); --media-control-text: #f3eedf; --menu-danger: #ff6b5f; --menu-danger-surface: rgb(255 107 95 / 14%); --menu-item-hover: rgb(233 226 210 / 9%); --menu-surface: rgb(42 48 27 / 94%); --shadow-card: 0 18px 45px rgb(0 0 0 / 18%); --shadow-modal: 0 24px 70px rgb(0 0 0 / 36%); --state-danger: #e74c3c; --state-danger-soft: rgb(231 76 60 / 14%); --state-success: #9db89f; --state-success-soft: rgb(139 178 143 / 16%); --surface-canvas: #2a2d1f; --surface-card: rgb(42 48 27 / 56%); --surface-glass: rgb(42 48 27 / 54%); --surface-hover: rgb(243 238 223 / 8%); --surface-input: rgb(42 48 27 / 58%); --surface-menu: rgb(43 44 42 / 92%); --surface-overlay: rgb(21 23 13 / 72%); --surface-panel: #1e2314; --surface-raised: #2a301b; --text-faint: rgb(233 226 210 / 46%); --text-inverse: #1e2314; --text-muted: #a79c83; --text-on-image: #f3eedf; --text-primary: #e9e2d2; --text-secondary: #86827b; }