/* LinesERP · Ватман — токены редизайна, 27.09.2026 Источник истины для цвета, шкал и теней. Собран из макета D:DEVlines-erp-redesignportal.html; при расхождении прав ЭТОТ файл. Как подключить. Три атрибута на корне (или на любом узле — образцы в настройках так и сделаны): data-scheme — сторона света (light | dark), её выбирает режим человека: светлая, тёмная, как в системе; data-bg — фон: neutral | cool | blue | warm | stone | rose; data-acc — акцент: blue | azure | teal | indigo | violet | plum | graphite. По умолчанию бюро: neutral + blue. Правило. Светлость всех ступеней задаёт сторона света, фон и акцент дают только оттенок (hue) и насыщенность (chroma). Поэтому контраст одинаков при любом из 84 сочетаний. Меняешь ступень — прогоняешь node check-contrast.mjs (лежит рядом, читает этот файл). Лестница поверхностей: --base (фон приложения) → --island (полотно-остров раздела) → --solid (то, что на нём лежит: карточка, окно, строка списка). --well — утопленное (колонка канбана, поле ввода). Имена. --accent-text здесь — ЦВЕТ АКЦЕНТА ДЛЯ ТЕКСТА (ссылка, выбранное). Подпись НА акценте — --accent-ink. В боевом LinesERP --accent-text значит обратное (подпись на акценте) — при переносе не перепутать. */ :root{ --f-ui:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --f-head:"Geologica","Golos Text",system-ui,sans-serif; --f-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace; --t-xs:11px; --t-sm:12.5px; --t-base:14px; --t-md:15px; --t-lg:18px; --t-xl:22px; --t-2xl:32px; --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:24px; --r-2xl:30px; --blur:blur(30px) saturate(180%); } [data-scheme="light"]{ color-scheme:light; --edge:rgba(255,255,255,.75); --edge-2:rgba(255,255,255,.28); --auto:#3A6DB0; --auto-soft:rgba(58,109,176,.11); --n1:#FBE7A0; --n2:#CDE5F7; --n3:#F8D2D6; --n4:#D4ECC5; --dot:color-mix(in srgb,var(--ink) 16%,transparent); --sh-1:0 0 0 .5px rgba(20,24,28,.06),0 1px 2px rgba(20,24,28,.05),0 2px 8px rgba(20,24,28,.04); --sh-2:0 0 0 .5px rgba(20,24,28,.07),0 2px 4px rgba(20,24,28,.04),0 10px 28px rgba(20,24,28,.08); --sh-3:0 0 0 .5px rgba(20,24,28,.08),0 4px 10px rgba(20,24,28,.05),0 24px 60px rgba(20,24,28,.14); --glow:16%; /* Ступени светлоты OKLCH — одни на все фоны и акценты */ --Lb:.93; --Ls:.995; --Lw:.905; --Ll:.88; --Ll2:.80; --Li:.21; --Li2:.42; --Li3:.50; --Lc:.965; --La:.52; --Lah:.46; --Ca:.14; --Lsoft:.95; --Csoft:.035; --cf:1; --late:oklch(.55 .17 27); --late-soft:oklch(.95 .03 27); --warn:oklch(.56 .12 70); --warn-soft:oklch(.95 .035 80); --ok:oklch(.54 .12 150); --ok-soft:oklch(.95 .03 150); } [data-scheme="dark"]{ color-scheme:dark; --edge:rgba(255,255,255,.10); --edge-2:rgba(255,255,255,.05); --auto:#86AEE6; --auto-soft:rgba(134,174,230,.12); --n1:#4B4320; --n2:#1D3A4D; --n3:#4B2A2E; --n4:#2A4322; --dot:color-mix(in srgb,var(--ink) 11%,transparent); --sh-1:0 0 0 .5px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3); --sh-2:0 0 0 .5px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.25),0 10px 28px rgba(0,0,0,.35); --sh-3:0 0 0 .5px rgba(0,0,0,.5),0 4px 10px rgba(0,0,0,.3),0 24px 60px rgba(0,0,0,.5); --glow:22%; --Lb:.18; --Ls:.24; --Lw:.16; --Ll:.31; --Ll2:.40; --Li:.95; --Li2:.80; --Li3:.68; --Lc:.21; --La:.78; --Lah:.84; --Ca:.12; --Lsoft:.30; --Csoft:.05; --cf:1; --late:oklch(.72 .14 25); --late-soft:oklch(.30 .05 25); --warn:oklch(.80 .12 78); --warn-soft:oklch(.30 .045 78); --ok:oklch(.76 .12 152); --ok-soft:oklch(.30 .045 152); } [data-scheme="dark"][data-bg="blue"]{--cf:1.5} /* ── Цвет: фон × акцент, всё в OKLCH ── Фон задаёт только оттенок и насыщенность нейтралей, акцент — только оттенок. Светлость у всех одна и берётся со стороны света, поэтому контраст одинаков при любом сочетании: 6 фонов × 7 акцентов × 2 стороны, худший случай по WCAG 2 — 4,9 для самого тихого текста на фоне страницы. Красного, янтарного и зелёного среди акцентов нет: ими говорят статусы (просрочено, ждёт, готово), акцент живёт на холодной половине круга. */ [data-bg="neutral"]{--bh:250;--bc:0.003} [data-bg="cool"]{--bh:250;--bc:0.012} [data-bg="blue"]{--bh:262;--bc:0.03} [data-bg="warm"]{--bh:80;--bc:0.014} [data-bg="stone"]{--bh:165;--bc:0.011} [data-bg="rose"]{--bh:355;--bc:0.04} [data-acc="blue"]{--ah:255;--ak:1} [data-acc="azure"]{--ah:232;--ak:1} [data-acc="teal"]{--ah:195;--ak:0.8} [data-acc="indigo"]{--ah:278;--ak:1} [data-acc="violet"]{--ah:305;--ak:1} [data-acc="plum"]{--ah:340;--ak:0.9} [data-acc="graphite"]{--ah:255;--ak:0.12} [data-bg]{ --base:oklch(var(--Lb) calc(var(--bc) * var(--cf)) var(--bh)); --solid:oklch(var(--Ls) calc(var(--bc) * var(--cf) * .5) var(--bh)); --island:oklch(var(--Lc) calc(var(--bc) * var(--cf) * .7) var(--bh)); --well:oklch(var(--Lw) calc(var(--bc) * var(--cf)) var(--bh)); --line:oklch(var(--Ll) calc(var(--bc) * var(--cf)) var(--bh)); --line-2:oklch(var(--Ll2) calc(var(--bc) * var(--cf)) var(--bh)); --ink:oklch(var(--Li) calc(var(--bc) * .6) var(--bh)); --ink-2:oklch(var(--Li2) calc(var(--bc) * .8) var(--bh)); --ink-3:oklch(var(--Li3) calc(var(--bc) * .8) var(--bh)); --accent:oklch(var(--La) calc(var(--Ca) * var(--ak)) var(--ah)); --accent-hover:oklch(var(--Lah) calc(var(--Ca) * var(--ak)) var(--ah)); --accent-soft:oklch(var(--Lsoft) calc(var(--Csoft) * var(--ak)) var(--ah)); --accent-ink:#fff; } [data-scheme="dark"][data-bg],[data-scheme="dark"] [data-bg]{--accent-ink:oklch(.2 .02 var(--ah))} /* Производные: одинаково считаются из любого сочетания */ [data-bg]{ --accent-text:var(--accent-hover); --sunken:color-mix(in srgb,var(--ink) 5%,transparent); --hover:color-mix(in srgb,var(--ink) 7%,transparent); --hair:color-mix(in srgb,var(--ink) 8%,transparent); --grey-soft:color-mix(in srgb,var(--ink) 7%,transparent); --canvas:color-mix(in srgb,var(--solid) 45%,transparent); --in:inset 0 1px 0 var(--edge),inset 0 0 0 1px var(--edge-2); --glass:color-mix(in srgb,var(--solid) 58%,transparent); --glass-strong:color-mix(in srgb,var(--solid) 76%,transparent); --glass-soft:color-mix(in srgb,var(--solid) 42%,transparent); color:var(--ink); } /* Подпись на кнопке-акценте: светлая на светлой стороне, тёмная на тёмной */ [data-bg] .btn-primary{color:var(--accent-ink)}