/* Sprintup — дизайн-токены. Палитра 9 «Морская волна ночью» (решение Лукаша 24.09.2026), концепция C «Аура». Ночь — главная сцена, день — песок. Клуб задаёт только --club-1, --club-2 и логотип; всё остальное считает CSS, на старых браузерах — cvet.js тем же правилом. Телефон первым: 390 px, одна рука, кнопки ≥ 44 px. */ :root{ /* ---- два цвета клуба (демо: № 1 вино + коралл) ---- */ --club-1:#8C1D3F; --club-2:#F26B3A; /* ---- шрифт: скруглённый системный, кириллица есть везде ---- */ --font:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --fs-xs:12px; --fs-s:14px; --fs-m:16px; --fs-l:19px; --fs-xl:24px; --fs-xxl:34px; --lh:1.45; /* ---- отступы, радиусы, размеры ---- */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --r-s:8px; --r-m:16px; --r-l:20px; /* капсул нет: радиус кнопки 16, карточки 20, метки 8 */ --tap:44px; --nav-h:60px; --horizon:42vh; /* запас для старых WebView без svh */ --horizon:42svh; /* линия горизонта. Каждый экран ставит свою в px под зазор между блоками (data-hz-after + ui.js, запас — inline на ); 42 % — только если ничего не задано */ /* ---- ДЕНЬ: песок и чернила цвета глубокой воды ---- */ --ground:color-mix(in oklab,var(--club-1-aura) 6%,#E3D7C0); /* песок чуть глубже (было #EFE8DA), чтобы свет над линией был СВЕТЛЕЕ песка */ --panel:rgba(255,252,246,.74); /* карточки: без размытия, горизонт чуть просвечивает */ --panel-solid:#FBF8F1; /* панель, шапка, композер — плотные */ --panel-2:color-mix(in oklab,#0A3B3A 6%,#E3D7C0); --rule:rgba(10,59,58,.12); --ink:#0A3B3A; --ink-2:#30504D; --ink-3:#345350; --track:rgba(10,59,58,.12); --signal:#0F6B66; --on-signal:#FFFFFF; --signal-text:#07544E; /* морская волна: одна кнопка + кольца + одно табло */ --warn:#9E4500; --warn-bg:color-mix(in oklab,#9E4500 12%,#FBF8F1); /* h 48 — не жёлтый */ --danger:#8C1A12; --danger-bg:color-mix(in oklab,#8C1A12 12%,#FBF8F1); --ok:#30504D; --ok-bg:color-mix(in oklab,#0A3B3A 8%,#FBF8F1); /* «есть» — чернила, не сигнал */ --hz-top:92%; --hz-mid:80%; /* свет клуба у верхнего края и у самой линии: полоса не гаснет, а обрывается на линии */ --hz-line:34%; /* прямая горизонта: темнее и полосы, и воды */ --hz-bottom:0%; /* днём второй цвет у панели не горит */ --aura-lmin:0.96; --aura-lmax:0.97; --aura-cmax:0.025; /* днём свет клуба СВЕТЛЕЕ песка (L 0,96–0,97 против 0,88): полоса/песок 1,18–1,20, линия/полоса ≈ 2 — читается светом, не тенью; тон клуба едва тёплый/холодный, пол не читается */ --ui-lmin:0.30; --ui-lmax:0.52; --ui-cmax:0.20; /* потолок хромы колец, меток и текста клуба: фуксия C 0,275 не станет неоном */ --txt-lmin:0.20; --txt-lmax:0.44; --dim-day:1; /* сегменты, тумблеры, панель — чернила */ color-scheme:light; } /* ---- НОЧЬ: море глубокое на всех клубах — база насыщенная, тон клуба ≤ 5 % ---- */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --ground:color-mix(in oklab,var(--club-1-aura) 5%,#04302D); --panel:color-mix(in srgb,var(--panel-solid) 80%,transparent); /* карточка ночью плотнее: небо просвечивает на 20 %, серый текст держит 4,5 и над самым светлым небом */ --panel-solid:color-mix(in oklab,#FFFFFF 7%,var(--ground)); --panel-2:color-mix(in oklab,#FFFFFF 13%,var(--ground)); --rule:rgba(255,255,255,.12); --ink:#F2F6F4; --ink-2:#CAD6D2; --ink-3:#CAD6D2; --track:rgba(255,255,255,.16); --signal:#62D9CF; --on-signal:#052625; --signal-text:#8AE4DC; /* не ярче #62D9CF, без свечения */ --warn:#F7A07E; --warn-bg:color-mix(in oklab,#F7A07E 10%,var(--panel-solid)); /* коралл h 42, не жёлтый (был #F6B36E h 66) */ --danger:#FFB3A8; --danger-bg:color-mix(in oklab,#FFB3A8 14%,var(--panel-solid)); --ok:#CAD6D2; --ok-bg:rgba(255,255,255,.08); --hz-top:88%; --hz-mid:56%; --hz-line:50%; --hz-bottom:28%; --aura-lmin:0.48; --aura-lmax:0.54; --aura-cmax:0.18; /* свет клуба над линией: L ≥ 0,48 при воде 0,29 */ --ui-lmin:0.62; --ui-lmax:0.80; --txt-lmin:0.92; --txt-lmax:0.95; /* имя клуба в шапке над самым светлым небом держит 4,5 */ color-scheme:dark; } } :root[data-theme="dark"]{ --ground:color-mix(in oklab,var(--club-1-aura) 5%,#04302D); --panel:color-mix(in srgb,var(--panel-solid) 80%,transparent); /* карточка ночью плотнее: небо просвечивает на 20 %, серый текст держит 4,5 и над самым светлым небом */ --panel-solid:color-mix(in oklab,#FFFFFF 7%,var(--ground)); --panel-2:color-mix(in oklab,#FFFFFF 13%,var(--ground)); --rule:rgba(255,255,255,.12); --ink:#F2F6F4; --ink-2:#CAD6D2; --ink-3:#CAD6D2; --track:rgba(255,255,255,.16); --signal:#62D9CF; --on-signal:#052625; --signal-text:#8AE4DC; --warn:#F7A07E; --warn-bg:color-mix(in oklab,#F7A07E 10%,var(--panel-solid)); --danger:#FFB3A8; --danger-bg:color-mix(in oklab,#FFB3A8 14%,var(--panel-solid)); --ok:#CAD6D2; --ok-bg:rgba(255,255,255,.08); --hz-top:88%; --hz-mid:56%; --hz-line:50%; --hz-bottom:28%; --aura-lmin:0.48; --aura-lmax:0.54; --aura-cmax:0.18; --ui-lmin:0.62; --ui-lmax:0.80; --txt-lmin:0.92; --txt-lmax:0.95; /* имя клуба в шапке над самым светлым небом держит 4,5 */ color-scheme:dark; } /* ---- ПРАВИЛО КЛУБА: два любых цвета → свет (аура) / элемент / текст / цвет надписи. Порог надписи: белая, если светлота L < 0,565, иначе чёрная — даёт ≥ 4,5 в обе стороны. Хрома элементов и текста ≤ --ui-cmax. ---- */ :root{ --club-1-aura:oklch(from var(--club-1) clamp(var(--aura-lmin),l,var(--aura-lmax)) min(c,var(--aura-cmax)) h); --club-2-aura:oklch(from var(--club-2) clamp(var(--aura-lmin),l,var(--aura-lmax)) min(c,var(--aura-cmax)) h); --club-1-ui:oklch(from var(--club-1) clamp(var(--ui-lmin),l,var(--ui-lmax)) min(c,var(--ui-cmax)) h); --club-2-ui:oklch(from var(--club-2) clamp(var(--ui-lmin),l,var(--ui-lmax)) min(c,var(--ui-cmax)) h); --club-1-text:oklch(from var(--club-1) clamp(var(--txt-lmin),l,var(--txt-lmax)) min(c,var(--ui-cmax)) h); --club-2-text:oklch(from var(--club-2) clamp(var(--txt-lmin),l,var(--txt-lmax)) min(c,var(--ui-cmax)) h); --on-club-1:oklch(from var(--club-1) calc((0.565 - l)*infinity) 0 0); --on-club-2:oklch(from var(--club-2) calc((0.565 - l)*infinity) 0 0); --on-club-1-ui:oklch(from var(--club-1-ui) calc((0.565 - l)*infinity) 0 0); --on-club-2-ui:oklch(from var(--club-2-ui) calc((0.565 - l)*infinity) 0 0); } /* ---- «Тёплый клуб» (оранжевый/жёлтый, h 45…100, C ≥ 0,08): гаснет только аура — но горизонт остаётся виден. Сигнал — бирюза у всех клубов. ---- */ :root[data-warm]{ --aura-cmax:0.025; --hz-top:92%; --hz-mid:80%; } /* днём аура и так почти белая — тёплый клуб ничего не теряет */ @media (prefers-color-scheme:dark){ :root[data-warm]:not([data-theme="light"]){ --aura-cmax:0.11; --hz-top:68%; --hz-mid:40%; } } :root[data-warm][data-theme="dark"]{ --aura-cmax:0.11; --hz-top:68%; --hz-mid:40%; } /* ---- «Синий клуб» (любой из двух цветов h 230…300, C ≥ 0,06): предупреждение уходит в чернила и держится формой — каймой у метки и жирным (ui.css .badge-warn), чтобы рядом с синим кольцом не было жёлто-оранжевого. Ставит cvet.js. ---- */ :root[data-blue]{ --warn:var(--ink); --warn-bg:var(--panel-2); } /* ---- демо-клубы для показа (в продукте клуб пишет --club-1/--club-2 в настройках) ---- */ :root[data-club="2"]{ --club-1:#1B4D3E; --club-2:#3C4046; } /* зелень + графит */ :root[data-club="3"]{ --club-1:#E86A10; --club-2:#3B2A1E; } /* оранжевый + коричневый — тёплый клуб */ :root[data-club="4"]{ --club-1:#1F4FD8; --club-2:#F2C230; } /* синий + жёлтый — чужая пара: cvet.js уводит второй в нейтраль, warn в чернила */