/* Токены оформления: цвета, отступы, размеры. Всё остальное в app.css ссылается только на них, поэтому тема меняется в одном месте, а не правкой компонентов. Тем три состояния, а не два: светлая, тёмная и «как в системе». Системная работает БЕЗ участия JavaScript — через prefers-color-scheme, — потому что модульный скрипт всегда defer, и у выбравшего системную тему не должно быть вспышки другой темы до его загрузки. Явный выбор ставится атрибутом data-theme на и обязан побеждать системную тему в ОБЕ стороны: светлая на тёмной системе и наоборот. */ :root { color-scheme: light; --bg: #f5f6f8; --bg-elevated: #ffffff; --bg-sunken: #eceef2; --border: #d7dae1; --border-strong: #b9bec9; --text: #1d2129; --text-muted: #5d6472; --text-inverse: #ffffff; --accent: #2f6feb; --accent-hover: #2559c4; --accent-soft: #e6eeff; --ok: #1f8a4c; --ok-soft: #e2f4e9; --warn: #9a6100; --warn-soft: #fdf1dc; --danger: #c62d32; --danger-soft: #fdeaea; --neutral: #5d6472; --neutral-soft: #eceef2; --radius: 8px; --radius-sm: 5px; --gap: 16px; --gap-sm: 8px; --gap-lg: 24px; --shadow: 0 1px 2px rgba(16, 22, 33, 0.08), 0 4px 12px rgba(16, 22, 33, 0.06); --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace; /* Три брейкпоинта дизайна §13: mobile до 640, tablet до 1024, дальше desktop. */ --nav-width: 208px; } @media (prefers-color-scheme: dark) { /* Условие на data-theme="light" обязательно: без него выбор «светлая» на тёмной системе не сработал бы — медиазапрос стоит позже и перебил бы его. */ :root:not([data-theme="light"]) { color-scheme: dark; --bg: #14171d; --bg-elevated: #1c2027; --bg-sunken: #101318; --border: #2c313b; --border-strong: #3d4453; --text: #e6e8ec; --text-muted: #9aa2b1; --text-inverse: #14171d; --accent: #6f9bff; --accent-hover: #8bb0ff; --accent-soft: #1e2942; --ok: #63c98d; --ok-soft: #16301f; --warn: #e0a944; --warn-soft: #33260f; --danger: #f2777c; --danger-soft: #38191b; --neutral: #9aa2b1; --neutral-soft: #23272f; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3); } } :root[data-theme="dark"] { color-scheme: dark; --bg: #14171d; --bg-elevated: #1c2027; --bg-sunken: #101318; --border: #2c313b; --border-strong: #3d4453; --text: #e6e8ec; --text-muted: #9aa2b1; --text-inverse: #14171d; --accent: #6f9bff; --accent-hover: #8bb0ff; --accent-soft: #1e2942; --ok: #63c98d; --ok-soft: #16301f; --warn: #e0a944; --warn-soft: #33260f; --danger: #f2777c; --danger-soft: #38191b; --neutral: #9aa2b1; --neutral-soft: #23272f; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3); } :root[data-theme="light"] { color-scheme: light; --bg: #f5f6f8; --bg-elevated: #ffffff; --bg-sunken: #eceef2; --border: #d7dae1; --border-strong: #b9bec9; --text: #1d2129; --text-muted: #5d6472; --text-inverse: #ffffff; --accent: #2f6feb; --accent-hover: #2559c4; --accent-soft: #e6eeff; --ok: #1f8a4c; --ok-soft: #e2f4e9; --warn: #9a6100; --warn-soft: #fdf1dc; --danger: #c62d32; --danger-soft: #fdeaea; --neutral: #5d6472; --neutral-soft: #eceef2; --shadow: 0 1px 2px rgba(16, 22, 33, 0.08), 0 4px 12px rgba(16, 22, 33, 0.06); }