/* Экспериментальная тема «Pastel». Активируется классом .theme-pastel на . ПРИНЦИП (по правке PO): пастели — ЯКОРЬ, остаются как есть (точные цвета вложения). Все остальные цвета СИНХРОНИЗИРУЮТСЯ с ними: берём ТОН каждой пастели и строим на нём насыщенный вариант единого веса. Тон совпадает с пастелью (одна семья), различие — только в насыщенности/светлоте. */ :root.theme-pastel{ /* ── Пастели PO — как есть (точные тона вложения) ── */ --pastel-rose: #fecdd3; --pastel-amber: oklch(0.87 0.09 70); /* тёплый золотой янтарь (тон 70), отличим от жёлтого */ --pastel-yellow: #fef08a; --pastel-green: #bbf7d0; --pastel-sky: #bae6fd; --pastel-purple: #e9d5ff; /* ── Синхронизированные насыщенные тона (тот же ТОН, что у пастели) ── тёплые (amber/yellow) чуть светлее — иначе уходят в грязь, теряя тон. */ --rose-solid: oklch(0.56 0.15 13); --amber-solid: oklch(0.60 0.15 70); --yellow-solid: oklch(0.64 0.14 105); --green-solid: oklch(0.56 0.15 150); --sky-solid: oklch(0.55 0.15 235); --purple-solid: oklch(0.56 0.16 305); /* Нейтрали — чистый холст, тон уведён в синеву палитры для родства */ --color-bg: #f7f9fc; --color-surface: #ffffff; --color-surface-2: #eef3f9; --color-border: #e3e9f1; --color-text: #16233a; --color-muted: #5b6a83; /* Акцент = sky, тот же тон, что у пастельного sky, но насыщенный (годен для CTA) */ --color-accent: var(--sky-solid); --color-accent-hover: oklch(0.49 0.15 235); --color-accent-active: oklch(0.43 0.14 235); --color-accent-weak: var(--pastel-sky); /* пастель как мягкий фон */ --color-on-accent: #ffffff; /* Статусы: насыщенный тон — текст/иконка, ПАСТЕЛЬ PO — как -weak фон */ --color-success: var(--green-solid); --color-success-weak: var(--pastel-green); --color-warning: var(--amber-solid); --color-warning-weak: var(--pastel-amber); --color-danger: var(--rose-solid); --color-danger-weak: var(--pastel-rose); --color-info: oklch(0.66 0.10 218); --color-info-weak: oklch(0.95 0.03 218); /* мягче+холоднее акцента, не путается с кнопкой */ --color-purple: var(--purple-solid);--color-purple-weak: var(--pastel-purple); /* Фокус/слои — под акцент */ --focus-ring: 0 0 0 3px oklch(0.55 0.15 235 / .35); --state-hover: oklch(0.55 0.05 235 / .07); --state-active:oklch(0.55 0.05 235 / .14); }