/* ============================================================ «Особый Запас» — дизайн-система · TOKENS v2 (31.08.2026) ------------------------------------------------------------ v2 · ТЁПЛАЯ ПАЛИТРА «ОСОБЫЙ ЗАПАС» (директива владельца 31.08: «перенести тёплый скин и на главную и не только — проверить все страницы»): холодная синева #2D7BFF ушла, токены приведены к единой тёплой системе сайта (эталон .syn-ch · cards.css): тёмный #241F20 · золото #92761F · жёлтый #FFDE00 · крем #FBF5E4 рамки #EDE9E0/#DCD5C6 · подписи #8C9296 · фон страницы #FDFCF9. ПРАВИЛО (без изменений): все компоненты (components.css) ссылаются ТОЛЬКО на эти переменные. Чтобы сменить дизайн всего сайта — меняйте значения здесь. Индексы (DS-*) совпадают с design-index.json и страницей /design.html ============================================================ */ :root { /* ---------- DS-C · ЦВЕТА (RGB-триплеты, использовать rgb(var(--x))) ---------- */ /* Бренд и действия — тёплая система «Особый Запас» (31.08) */ --color-brand-light: 146 118 31; /* DS-C-01 #92761F — золото бренда */ --color-brand-deep: 36 31 32; /* DS-C-02 #241F20 — тёмный бренда */ --color-primary: 146 118 31; /* DS-C-03 #92761F — главный акцент (ссылки, акценты) */ --color-primary-content:255 255 255; /* DS-C-04 текст на primary */ --color-primary-hover: 124 99 24; /* DS-C-05 #7C6318 */ --color-primary-active: 110 88 20; /* DS-C-06 #6E5814 */ --color-primary-disabled:189 178 166; /* DS-C-07 #BDB2A6 — тёплый disabled */ --color-secondary: 247 245 240; /* DS-C-08 #F7F5F0 — крем-чип */ --color-secondary-content:58 52 53; /* DS-C-09 #3A3435 */ --color-secondary-hover:237 233 224; /* DS-C-10 #EDE9E0 */ --color-secondary-active:220 213 198; /* DS-C-11 #DCD5C6 */ --color-accent: 245 166 35; /* DS-C-12 #F5A623 — янтарный акцент */ --color-accent-content: 255 255 255; /* DS-C-13 */ --color-info: 14 165 233; /* DS-C-14 #0EA5E9 */ --color-info-content: 255 255 255; /* DS-C-15 */ --color-success: 16 185 129; /* DS-C-16 #10B981 */ --color-success-content:255 255 255; /* DS-C-17 */ --color-warning: 245 158 11; /* DS-C-18 #F59E0B */ --color-warning-content:255 255 255; /* DS-C-19 */ --color-error: 239 68 68; /* DS-C-20 #EF4444 */ --color-error-content: 255 255 255; /* DS-C-21 */ /* ---------- DS-B · ФОНЫ (тёплые, 31.08) ---------- */ --bg-app: 253 252 249; /* DS-B-01 #FDFCF9 — кремовый фон приложения */ --bg-surface: 255 255 255; /* DS-B-02 #FFFFFF — карточки */ --bg-muted: 247 245 240; /* DS-B-03 #F7F5F0 — приглушённые блоки */ --bg-inverse: 36 31 32; /* DS-B-04 #241F20 — тёмные секции/футер */ --bg-glass: 255 255 255; /* DS-B-05 */ --bg-glass-alpha: 0.7; /* DS-B-06 */ --bg-glass-subtle-alpha:0.05; /* DS-B-07 */ /* ---------- DS-L · ЛИНИИ И ГРАНИЦЫ (тёплые) ---------- */ --border-subtle: 237 233 224; /* DS-L-01 #EDE9E0 */ --border-subtle-alpha: 0.8; /* DS-L-02 */ --glass-border: 36 31 32; /* DS-L-03 */ --glass-border-alpha: 0.08; /* DS-L-04 */ /* ---------- DS-T · ТЕКСТ (тёплый) ---------- */ --text-main: 36 31 32; /* DS-T-01 #241F20 */ --text-muted: 140 146 150; /* DS-T-02 #8C9296 */ --text-inverse: 253 252 249; /* DS-T-03 на тёмном фоне */ /* ---------- DS-F · ТИПОГРАФИКА ---------- */ --font-sans: "Satoshi","Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; /* DS-F-01 */ --font-mono: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* DS-F-02 */ --text-xs: 0.75rem; /* DS-F-03 12px */ --text-sm: 0.875rem; /* DS-F-04 14px */ --text-base: 1rem; /* DS-F-05 16px */ --text-lg: 1.125rem; /* DS-F-06 18px */ --text-xl: 1.25rem; /* DS-F-07 20px */ --text-2xl: 1.5rem; /* DS-F-08 24px */ --text-3xl: 1.875rem; /* DS-F-09 30px */ --text-4xl: 2.25rem; /* DS-F-10 36px */ --text-5xl: 3rem; /* DS-F-11 48px */ --leading-tight: 1.2; /* DS-F-12 */ --leading-normal: 1.55; /* DS-F-13 */ /* ---------- DS-S · ОТСТУПЫ (шкала 4px) ---------- */ --space-1: 0.25rem; /* DS-S-01 */ --space-2: 0.5rem; /* DS-S-02 */ --space-3: 0.75rem; /* DS-S-03 */ --space-4: 1rem; /* DS-S-04 */ --space-5: 1.25rem; /* DS-S-05 */ --space-6: 1.5rem; /* DS-S-06 */ --space-8: 2rem; /* DS-S-07 */ --space-10: 2.5rem; /* DS-S-08 */ --space-12: 3rem; /* DS-S-09 */ --space-16: 4rem; /* DS-S-10 */ --container: 72rem; /* DS-S-11 1152px — ширина контента */ /* ---------- DS-R · РАДИУСЫ ---------- */ --radius-sm: 0.375rem; /* DS-R-01 6px — инпуты, бейджи */ --radius-md: 0.625rem; /* DS-R-02 10px — кнопки */ --radius-lg: 0.75rem; /* DS-R-03 12px — карточки */ --radius-xl: 1.25rem; /* DS-R-04 20px — крупные секции */ --radius-full: 9999px; /* DS-R-05 — чипы, аватары */ /* ---------- DS-H · ТЕНИ ---------- */ --shadow-xs: 0 1px 2px 0 rgba(15,23,42,0.04); /* DS-H-01 */ --shadow-sm: 0 1px 3px 0 rgba(15,23,42,0.08), 0 1px 2px -1px rgba(15,23,42,0.06); /* DS-H-02 */ --shadow-md: 0 4px 6px -1px rgba(15,23,42,0.08), 0 2px 4px -2px rgba(15,23,42,0.06); /* DS-H-03 */ --shadow-lg: 0 10px 15px -3px rgba(15,23,42,0.10), 0 4px 6px -4px rgba(15,23,42,0.08); /* DS-H-04 */ --shadow-xl: 0 20px 25px -5px rgba(15,23,42,0.12), 0 8px 10px -6px rgba(15,23,42,0.08); /* DS-H-05 */ --shadow-glow: 0 0 0 1px rgba(36,31,32,0.18), 0 8px 24px -4px rgba(146,118,31,0.32); /* DS-H-06 — тёплое свечение */ /* ---------- DS-M · АНИМАЦИЯ ---------- */ --duration-fast: 120ms; /* DS-M-01 */ --duration-base: 200ms; /* DS-M-02 */ --duration-slow: 320ms; /* DS-M-03 */ --duration-slower: 480ms; /* DS-M-04 */ --easing-smooth: cubic-bezier(0.32,0.72,0.0,1.0); /* DS-M-05 */ --easing-snappy: cubic-bezier(0.4,0.0,0.2,1.0); /* DS-M-06 */ --easing-bounce: cubic-bezier(0.68,-0.55,0.27,1.55);/* DS-M-07 */ --easing-glide: cubic-bezier(0.2,0.8,0.2,1.0); /* DS-M-08 */ /* ---------- DS-G · GLASS (стекло) ---------- */ --glass-blur: 12px; /* DS-G-01 */ --glass-subtle-blur: 10px; /* DS-G-02 */ --glass-saturate: 150%; /* DS-G-03 */ /* ---------- DS-Z · Z-INDEX ---------- */ --z-dropdown: 30; /* DS-Z-01 */ --z-overlay: 40; /* DS-Z-02 */ --z-modal: 50; /* DS-Z-03 */ --z-popover: 60; /* DS-Z-04 */ --z-toast: 70; /* DS-Z-05 */ --z-tooltip: 80; /* DS-Z-06 */ /* ---------- DS-O · ПРОЧЕЕ ---------- */ --ring-focus: 255 222 0; /* DS-O-01 — фокус-кольцо доступности (жёлтый) */ }