/* АгроХакинг: токены дизайн-системы. Палитра «Хвоя»: тёмно-зелёная основа, рапс, почва и терминальный слой. Подключение: Тема: . Без атрибута тема следует за системой. */ @import url("https://fonts.googleapis.com/css2?family=Geologica:wght@400;600;800&family=Golos+Text:wght@400;500;600&family=JetBrains+Mono:wght@400;600&family=Tektur:wght@600;800&display=swap&subset=cyrillic"); :root { /* Палитра: исходные значения */ --ah-pine-900: #041511; --ah-pine-800: #081D18; /* фон софта */ --ah-pine-700: #0E2A24; /* хвоя, основной тёмный */ --ah-pine-600: #12382F; --ah-pine-550: #1A4A3E; --ah-pine-500: #25574A; --ah-pine-300: #5E8C7E; --ah-pine-200: #A9C7BD; --ah-oz-700: #3E6A25; /* озимь: зелёный-поддержка */ --ah-oz-500: #5E8C3A; --ah-oz-300: #9CCB6F; --ah-oz-100: #DDEBCF; --ah-rapeseed-500: #F2B705; /* рапс: единственный акцент */ --ah-rapeseed-400: #FFC21A; /* рапс на тёмном */ --ah-rapeseed-600: #D49D00; --ah-rapeseed-100: #FFF0BF; --ah-soil-700: #4A3A2C; /* почва: блоки данных о поле */ --ah-soil-600: #5C4A3A; --ah-soil-400: #8A6E55; /* почва на тёмном фоне */ --ah-soil-100: #F3EEE6; /* светлый текст на почве */ --ah-sand-300: #D2B48C; /* дорожки схемы в знаке, светлая тема */ --ah-sand-100: #F0E0C8; /* дорожки схемы в знаке, тёмная тема */ --ah-term-400: #D6F5B0; /* вывод терминала, только внутри терминала */ --ah-term-bg: #041511; --ah-field-50: #EDF0EC; /* светлая основа */ --ah-field-100: #E1E6E0; --ah-furrow-200: #D5DBD3; /* борозда: линии */ --ah-furrow-400: #AFB8AC; --ah-ink: #0A1A16; --ah-red-600: #B3261E; --ah-red-300: #FF9A93; /* Шрифты */ --font-display: "Geologica", "Segoe UI", system-ui, sans-serif; --font-accent: "Tektur", "Geologica", "Segoe UI", system-ui, sans-serif; /* обложки и крупные акценты */ --font-text: "Golos Text", "Segoe UI", system-ui, sans-serif; --font-data: "JetBrains Mono", ui-monospace, Consolas, monospace; /* Шкала текста: основание 16, шаг около 1.25 */ --fs-xs: 0.8125rem; --fs-sm: 0.9375rem; --fs-md: 1rem; --fs-lg: 1.25rem; --fs-xl: 1.5625rem; --fs-2xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); --fs-3xl: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); --fs-4xl: clamp(2.75rem, 1.6rem + 5vw, 5.5rem); /* Отступы: шаг 4 */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px; --sp-9: 112px; /* Засечка: срез правого верхнего угла. Скругления в системе нет. */ --cut-s: 8px; --cut-m: 14px; --cut-l: 28px; /* Сетка точек для обложек и терминала */ --dots: 14px; } /* Светлая тема: сайт, маркетплейс, печать */ :root, :root[data-theme="light"], [data-theme="light"] { --bg: var(--ah-field-50); --surface: #FFFFFF; --surface-2: var(--ah-field-100); --line: var(--ah-furrow-200); --text: var(--ah-ink); --text-muted: #4A5C55; --brand: var(--ah-pine-700); --on-brand: var(--ah-field-50); --accent: var(--ah-rapeseed-500); --on-accent: var(--ah-ink); --positive: var(--ah-oz-700); --danger: var(--ah-red-600); --focus: var(--ah-pine-700); --soil: var(--ah-soil-700); --on-soil: var(--ah-soil-100); --term-bg: var(--ah-pine-700); --term-text: #DCEBE4; --term-dim: #8FB0A4; --term-out: var(--ah-term-400); --term-prompt: var(--ah-rapeseed-400); --logo-main: var(--ah-pine-700); --logo-leaf: var(--ah-oz-500); --logo-mark: var(--ah-rapeseed-600); --logo-soil: var(--ah-soil-700); --logo-trace: var(--ah-sand-300); --logo-word: var(--ah-pine-700); } /* Тёмная тема: софт агронома */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: var(--ah-pine-800); --surface: var(--ah-pine-600); --surface-2: var(--ah-pine-550); --line: var(--ah-pine-500); --text: #E6EFEA; --text-muted: var(--ah-pine-200); --brand: var(--ah-field-50); --on-brand: var(--ah-pine-700); --accent: var(--ah-rapeseed-400); --on-accent: var(--ah-pine-800); --positive: var(--ah-oz-300); --danger: var(--ah-red-300); --focus: var(--ah-rapeseed-400); --soil: var(--ah-soil-700); --on-soil: var(--ah-soil-100); --term-bg: var(--ah-term-bg); --term-text: #DCEBE4; --term-dim: #8FB0A4; --term-out: var(--ah-term-400); --term-prompt: var(--ah-rapeseed-400); --logo-main: var(--ah-field-50); --logo-leaf: var(--ah-oz-300); --logo-mark: var(--ah-rapeseed-500); --logo-soil: var(--ah-soil-400); --logo-trace: var(--ah-sand-100); --logo-word: var(--ah-field-50); } } :root[data-theme="dark"], [data-theme="dark"] { --bg: var(--ah-pine-800); --surface: var(--ah-pine-600); --surface-2: var(--ah-pine-550); --line: var(--ah-pine-500); --text: #E6EFEA; --text-muted: var(--ah-pine-200); --brand: var(--ah-field-50); --on-brand: var(--ah-pine-700); --accent: var(--ah-rapeseed-400); --on-accent: var(--ah-pine-800); --positive: var(--ah-oz-300); --danger: var(--ah-red-300); --focus: var(--ah-rapeseed-400); --soil: var(--ah-soil-700); --on-soil: var(--ah-soil-100); --term-bg: var(--ah-term-bg); --term-text: #DCEBE4; --term-dim: #8FB0A4; --term-out: var(--ah-term-400); --term-prompt: var(--ah-rapeseed-400); --logo-main: var(--ah-field-50); --logo-leaf: var(--ah-oz-300); --logo-mark: var(--ah-rapeseed-500); --logo-soil: var(--ah-soil-400); --logo-trace: var(--ah-sand-100); --logo-word: var(--ah-field-50); } /* Засечка как утилита */ .cut-s { clip-path: polygon(0 0, calc(100% - var(--cut-s)) 0, 100% var(--cut-s), 100% 100%, 0 100%); } .cut-m { clip-path: polygon(0 0, calc(100% - var(--cut-m)) 0, 100% var(--cut-m), 100% 100%, 0 100%); } .cut-l { clip-path: polygon(0 0, calc(100% - var(--cut-l)) 0, 100% var(--cut-l), 100% 100%, 0 100%); } /* Терминал: команда и результат. Зелёный только для вывода. */ .terminal { background: var(--term-bg); color: var(--term-text); font-family: var(--font-data); font-size: var(--fs-xs); line-height: 1.75; padding: var(--sp-4) var(--sp-5); clip-path: polygon(0 0, calc(100% - var(--cut-m)) 0, 100% var(--cut-m), 100% 100%, 0 100%); } .terminal .prompt { color: var(--term-prompt); } .terminal .dim { color: var(--term-dim); } .terminal .out { color: var(--term-out); } /* Почва: блок данных о поле */ .soil-card { background: var(--soil); color: var(--on-soil); padding: var(--sp-4) var(--sp-5); clip-path: polygon(0 0, calc(100% - var(--cut-m)) 0, 100% var(--cut-m), 100% 100%, 0 100%); }