/* ============================================================ ColDon Monitor — Design tokens Три направления управляются исключительно CSS-переменными, поэтому каждый экран реагирует на переключение. По умолчанию (:root) = «Поле». Переключение — атрибутом / data-theme="earth". ============================================================ */ /* ---- IBM Plex (кириллица + латиница) ---------------------- */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap'); /* ============================================================ НАПРАВЛЕНИЕ A — «Поле» (по умолчанию): светлое приложение, тёмный лесной сайдбар ============================================================ */ :root { /* нейтрали — тёплые, низкая насыщенность */ --bg: oklch(0.978 0.006 130); --surface: oklch(1 0 0); --surface-2: oklch(0.972 0.006 130); --surface-3: oklch(0.955 0.008 130); --ink: oklch(0.245 0.012 145); --ink-2: oklch(0.44 0.012 145); --muted: oklch(0.60 0.010 145); --border: oklch(0.912 0.008 140); --border-strong: oklch(0.86 0.010 140); /* бренд — глубокий лесной зелёный */ --brand: oklch(0.52 0.11 152); --brand-strong: oklch(0.45 0.11 152); --brand-ink: oklch(0.985 0.01 150); --brand-soft: oklch(0.95 0.045 150); --brand-soft-ink:oklch(0.40 0.10 152); /* функциональные акценты (общие насыщенность/светлота, меняется тон) */ --sky: oklch(0.55 0.12 245); /* карта / инфо */ --amber: oklch(0.66 0.13 78); /* предупреждения */ --danger: oklch(0.56 0.16 26); /* деструктивные */ --ok: oklch(0.60 0.12 152); /* онлайн/успех */ /* сайдбар */ --side-bg: oklch(0.30 0.045 158); --side-bg-2: oklch(0.27 0.045 158); --side-ink: oklch(0.97 0.01 150); --side-muted: oklch(0.78 0.025 150); --side-border: oklch(0.40 0.04 158 / 0.5); --side-active-bg: oklch(0.42 0.07 152); --side-active-ink:oklch(0.99 0.01 150); --side-brand: oklch(0.80 0.10 150); /* палитра карты нормы внесения (предписание) — та же 6-ступенчатая, что в терминале ColDonAgro: бордовый → фиолетовый → лайм → зелёный → оранжевый → красный. Общая для всех трёх тем: это цвета ДАННЫХ (должны совпадать с экраном трактора), а не оформления. */ --ratemap-1: #4A1942; --ratemap-2: #804878; --ratemap-3: #7BBE5A; --ratemap-4: #2E9B4E; --ratemap-5: #E89244; --ratemap-6: #C8382E; /* форма и ритм */ --radius: 12px; --radius-sm: 8px; --radius-lg: 18px; --row-h: 56px; --gap: 20px; --pad-card: 22px; --shadow-sm: 0 1px 2px oklch(0.3 0.02 150 / 0.06), 0 1px 1px oklch(0.3 0.02 150 / 0.04); --shadow-md: 0 4px 16px oklch(0.3 0.03 150 / 0.08), 0 1px 3px oklch(0.3 0.02 150 / 0.06); --shadow-lg: 0 18px 50px oklch(0.25 0.04 150 / 0.18); /* типографика */ --font: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --fs-body: 15px; --fs-h1: 30px; --tracking: -0.011em; /* фон страницы входа */ --auth-bg-1: oklch(0.40 0.07 156); --auth-bg-2: oklch(0.28 0.05 158); } /* ============================================================ НАПРАВЛЕНИЕ B — «Терминал»: плотная панель оператора, светлая рейка ============================================================ */ [data-theme="terminal"] { --bg: oklch(0.965 0.004 250); --surface: oklch(1 0 0); --surface-2: oklch(0.975 0.004 250); --surface-3: oklch(0.955 0.006 250); --ink: oklch(0.24 0.02 250); --ink-2: oklch(0.42 0.02 250); --muted: oklch(0.58 0.015 250); --border: oklch(0.905 0.006 250); --border-strong: oklch(0.85 0.008 250); --brand: oklch(0.50 0.13 200); --brand-strong: oklch(0.43 0.13 200); --brand-ink: oklch(0.99 0.01 200); --brand-soft: oklch(0.94 0.05 200); --brand-soft-ink:oklch(0.38 0.12 200); --sky: oklch(0.52 0.13 235); --amber: oklch(0.64 0.14 70); --danger: oklch(0.55 0.17 26); --ok: oklch(0.58 0.13 162); --side-bg: oklch(0.985 0.003 250); --side-bg-2: oklch(0.975 0.003 250); --side-ink: oklch(0.28 0.02 250); --side-muted: oklch(0.52 0.015 250); --side-border: oklch(0.90 0.006 250); --side-active-bg: oklch(0.93 0.05 200); --side-active-ink:oklch(0.34 0.13 200); --side-brand: oklch(0.50 0.13 200); --radius: 8px; --radius-sm: 6px; --radius-lg: 12px; --row-h: 44px; --gap: 14px; --pad-card: 16px; --fs-body: 14px; --fs-h1: 24px; --auth-bg-1: oklch(0.32 0.06 220); --auth-bg-2: oklch(0.22 0.04 235); } /* ============================================================ НАПРАВЛЕНИЕ C — «Грунт»: тёплый кремовый, дружелюбнее, крупнее шрифт ============================================================ */ [data-theme="earth"] { --bg: oklch(0.965 0.018 75); --surface: oklch(0.992 0.008 75); --surface-2: oklch(0.955 0.018 75); --surface-3: oklch(0.935 0.022 70); --ink: oklch(0.27 0.02 60); --ink-2: oklch(0.45 0.02 60); --muted: oklch(0.58 0.018 60); --border: oklch(0.89 0.018 70); --border-strong: oklch(0.82 0.022 68); --brand: oklch(0.52 0.10 145); --brand-strong: oklch(0.45 0.10 145); --brand-ink: oklch(0.99 0.01 145); --brand-soft: oklch(0.93 0.05 130); --brand-soft-ink:oklch(0.40 0.09 145); --sky: oklch(0.55 0.11 240); --amber: oklch(0.62 0.14 65); --danger: oklch(0.55 0.16 30); --ok: oklch(0.58 0.11 145); --side-bg: oklch(0.34 0.045 60); --side-bg-2: oklch(0.30 0.045 60); --side-ink: oklch(0.97 0.015 75); --side-muted: oklch(0.80 0.03 75); --side-border: oklch(0.44 0.04 60 / 0.5); --side-active-bg: oklch(0.46 0.07 130); --side-active-ink:oklch(0.99 0.01 130); --side-brand: oklch(0.82 0.10 120); --radius: 16px; --radius-sm: 11px; --radius-lg: 22px; --row-h: 60px; --gap: 22px; --pad-card: 24px; --fs-body: 16px; --fs-h1: 32px; --auth-bg-1: oklch(0.42 0.06 110); --auth-bg-2: oklch(0.30 0.05 70); }