/* Цветовые токены витрины. :root — светлая тема (значения исторической палитры), html[data-theme="dark"] — тёмная. Тема ставится inline-скриптом в до загрузки CSS, поэтому вспышки светлого нет. */ :root { /* Поверхности */ --c-bg-page: #fff; --c-bg-card: #fbfbfb; --c-bg-muted: #f5f5f5; --c-bg-chip: #eef0f5; /* Текст */ --c-text-strong: #000; --c-text-primary: #1e1f22; --c-text-heading: #2b2d33; --c-text-mid: #434343; --c-text-secondary: #616161; --c-text-tertiary: #878a92; --c-text-placeholder: #a0a0a0; --c-text-on-accent: #fff; /* Бордеры */ --c-border: #e1e1e1; --c-border-mid: #d6d8e0; --c-border-strong: #d0d0d0; /* Фокус инпутов */ --c-input-focus-border: #434343; --c-input-focus-ring: rgba(67, 67, 67, 0.3); /* Акцент (бренд-синий) */ --c-accent: #325bff; --c-accent-hover: #496aee; --c-accent-bright: #3c63ff; --c-accent-soft: #6a88ff; --c-accent-active: #2547d6; --c-accent-border: #c4d2ff; --c-accent-bg: #f0f4ff; --c-accent-bg-2: #e5ecff; --c-accent-bg-3: #e8eeff; --c-accent-bg-4: #f4f7ff; --c-accent-alpha-06: rgba(50, 91, 255, 0.06); --c-accent-alpha-10: rgba(50, 91, 255, 0.1); --c-accent-alpha-18: rgba(50, 91, 255, 0.18); --c-accent-hover-alpha: rgba(73, 106, 238, 0.1); /* Контрастная (чёрная) кнопка */ --c-btn-contrast-bg: #000; --c-btn-contrast-hover: #3c3c3c; --c-btn-contrast-disabled: #828282; --c-btn-contrast-text: #fff; --c-btn-inset-light: rgba(255, 255, 255, 0.25); /* Статусы: успех */ --c-success: #1e7f38; --c-success-bg: #e8f6ec; --c-success-text: #275f11; --c-success-bg-2: #dbfbda; --c-success-badge-bg: #affebf; --c-success-badge-text: #014b40; /* Статусы: ошибка/отказ */ --c-danger: #a1131b; --c-danger-bright: #e22a45; --c-danger-deep: #ca1934; --c-danger-mid: #b5343a; --c-danger-bg: #fce4e4; --c-danger-bg-2: #f9dcdb; --c-danger-text: #68120b; --c-danger-alpha-10: rgba(202, 25, 52, 0.1); --c-danger-alpha-03: rgba(202, 25, 52, 0.03); /* Статусы: предупреждение (жёлтые плашки) */ --c-warning: #d89600; --c-warning-bg: #fff8ce; --c-warning-text: #584c03; --c-warning-bg-2: #fff7e0; --c-warning-text-2: #8a6a12; /* Статусы: оранжевый (status--5) */ --c-orange-bg: #ffe6d0; --c-orange-text: #a6520f; /* Категории заказов: фиолетовый */ --c-violet: #7d47c5; --c-violet-alpha: rgba(151, 71, 255, 0.2); /* Тени и оверлеи */ --c-shadow-soft: rgba(0, 0, 0, 0.04); --c-shadow-mid: rgba(0, 0, 0, 0.08); --c-shadow-strong: rgba(0, 0, 0, 0.12); --c-shadow-pop: #00000029; --c-shadow-pop-soft: #0000000a; --c-shadow-tint: rgba(20, 30, 60, 0.08); --c-shadow-tint-strong: rgba(20, 30, 60, 0.22); --c-shadow-tint-soft: rgba(20, 30, 60, 0.06); --c-shadow-card: rgba(43, 45, 51, 0.04); --c-overlay: rgba(8, 8, 8, 0.6); --c-overlay-loader: rgba(250, 250, 250, 0.6); /* Нативные виджеты (скроллбары, инпуты) следуют теме */ color-scheme: light; } html[data-theme="dark"] { /* Поверхности */ --c-bg-page: #17181c; --c-bg-card: #1f2026; --c-bg-muted: #24262d; --c-bg-chip: #2b2e37; /* Текст */ --c-text-strong: #f2f3f5; --c-text-primary: #e8e9ec; --c-text-heading: #dfe1e6; --c-text-mid: #c6c9d0; --c-text-secondary: #9a9da6; --c-text-tertiary: #84878f; --c-text-placeholder: #686b73; --c-text-on-accent: #fff; /* Бордеры */ --c-border: #33353c; --c-border-mid: #3a3d45; --c-border-strong: #4a4d55; /* Фокус инпутов */ --c-input-focus-border: #9a9da6; --c-input-focus-ring: rgba(154, 157, 166, 0.3); /* Акцент — бренд-синий остаётся, hover/подложки светлее/темнее */ --c-accent: #325bff; --c-accent-hover: #5575ff; --c-accent-bright: #4a6dff; --c-accent-soft: #6a88ff; --c-accent-active: #5575ff; --c-accent-border: #2e3f73; --c-accent-bg: #1d2538; --c-accent-bg-2: #202a42; --c-accent-bg-3: #222d48; --c-accent-bg-4: #1b2233; --c-accent-alpha-06: rgba(83, 116, 255, 0.08); --c-accent-alpha-10: rgba(83, 116, 255, 0.14); --c-accent-alpha-18: rgba(83, 116, 255, 0.22); --c-accent-hover-alpha: rgba(106, 136, 255, 0.14); /* Контрастная кнопка: в тёмной теме инвертируется в светлую */ --c-btn-contrast-bg: #e8e9ec; --c-btn-contrast-hover: #c9ccd3; --c-btn-contrast-disabled: #5a5d64; --c-btn-contrast-text: #17181c; --c-btn-inset-light: rgba(255, 255, 255, 0.08); /* Статусы: успех */ --c-success: #4cba6b; --c-success-bg: #16301e; --c-success-text: #7fd99a; --c-success-bg-2: #173420; --c-success-badge-bg: #1d4527; --c-success-badge-text: #8fe3a8; /* Статусы: ошибка/отказ */ --c-danger: #ff6b74; --c-danger-bright: #ff5c72; --c-danger-deep: #ff5c72; --c-danger-mid: #ff7a82; --c-danger-bg: #3a1c20; --c-danger-bg-2: #3a1c20; --c-danger-text: #ffa3a8; --c-danger-alpha-10: rgba(255, 92, 114, 0.12); --c-danger-alpha-03: rgba(255, 92, 114, 0.05); /* Статусы: предупреждение */ --c-warning: #e0a52e; --c-warning-bg: #332b10; --c-warning-text: #e6cb6e; --c-warning-bg-2: #322a12; --c-warning-text-2: #dfc068; /* Статусы: оранжевый */ --c-orange-bg: #38230f; --c-orange-text: #e89a5e; /* Категории заказов: фиолетовый */ --c-violet: #b794e6; --c-violet-alpha: rgba(151, 71, 255, 0.25); /* Тени глубже (на тёмном фоне иначе не видны), оверлеи темнее */ --c-shadow-soft: rgba(0, 0, 0, 0.2); --c-shadow-mid: rgba(0, 0, 0, 0.3); --c-shadow-strong: rgba(0, 0, 0, 0.45); --c-shadow-pop: rgba(0, 0, 0, 0.5); --c-shadow-pop-soft: rgba(0, 0, 0, 0.25); --c-shadow-tint: rgba(0, 0, 0, 0.3); --c-shadow-tint-strong: rgba(0, 0, 0, 0.5); --c-shadow-tint-soft: rgba(0, 0, 0, 0.25); --c-shadow-card: rgba(0, 0, 0, 0.3); --c-overlay: rgba(0, 0, 0, 0.7); --c-overlay-loader: rgba(23, 24, 28, 0.6); color-scheme: dark; }