/* Дизайн-система TutorScope: гибрид палитры Jitsi (вибрис.лискова.рф) и дашборда "Выручка по месяцам" (артефакт, чёрно-зелёный). Тёмная тема = тёплая чёрно-зелёная база артефакта (она уже держит то же холодное-минималистичное настроение, что и Jitsi, только в зелёном, а не синем) + плоская утилитарная структура Jitsi, без засечек в интерфейсе. Serif (Georgia) — только в заголовках, акцентом, как в артефакте. Дневная тема — по брифу: кремовый фон, бежевые линии, тёмно-коричневый текст, коричневый/карамельный акцент вместо зелёного. Переключение автоматическое, через prefers-color-scheme — это media query CSS, читает системную тёмную/светлую тему браузера на Windows, macOS и Linux одинаково, без платформенного кода. data-theme на — ручной override поверх системной темы (переключатель в шапке, если понадобится). */ :root { --ink: #2b211a; --ink-2: #6b5c4d; --ink-3: #9c8b78; --bg: #f7f3ec; --card: #fffdfa; --line: #e6dcc8; --grid: #efe7d8; --accent: #a0652f; --accent-hi: #7a4a22; --danger: #b8433a; --band: #f1e9da; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #eef2f0; --ink-2: #a9bdb9; --ink-3: #7d938f; --bg: #0c1514; --card: #131e1d; --line: #253533; --grid: #1d2b2a; --accent: #3fb99e; --accent-hi: #77dcc4; --danger: #e0736a; --band: #101a19; color-scheme: dark; } } :root[data-theme="dark"] { --ink: #eef2f0; --ink-2: #a9bdb9; --ink-3: #7d938f; --bg: #0c1514; --card: #131e1d; --line: #253533; --grid: #1d2b2a; --accent: #3fb99e; --accent-hi: #77dcc4; --danger: #e0736a; --band: #101a19; color-scheme: dark; } :root[data-theme="light"] { --ink: #2b211a; --ink-2: #6b5c4d; --ink-3: #9c8b78; --bg: #f7f3ec; --card: #fffdfa; --line: #e6dcc8; --grid: #efe7d8; --accent: #a0652f; --accent-hi: #7a4a22; --danger: #b8433a; --band: #f1e9da; color-scheme: light; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif; font-variant-numeric: tabular-nums; } h1, h2, h3 { font-family: Georgia, serif; font-weight: 400; letter-spacing: -0.015em; margin: 0; } .card { background: var(--card); border: 1px solid var(--line); border-radius: 4px; } .btn { font: inherit; font-weight: 600; border: 1px solid transparent; border-radius: 4px; padding: 10px 18px; cursor: pointer; background: var(--accent); color: var(--card); transition: background 0.12s; } .btn:hover { background: var(--accent-hi); } .btn:disabled { opacity: 0.5; cursor: default; } input { font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; } input:focus { outline: 2px solid var(--accent); outline-offset: -1px; } .muted { color: var(--ink-3); } .error { color: var(--danger); font-size: 13.5px; }