/* tokens.css — единый источник дизайн-токенов family-calendar, тема «Hearth». Канон: docs/DESIGN_TOKENS_HEARTH.md — он источник правды, это файл-подключение. Не редактировать значения здесь без синхронизации с каноном. Характер «Hearth» (очаг): тёплая интимность семьи/пары. Сознательно НЕ повторяет cream/sand-дефолт (в т.ч. тему Birch из CampSpace) — берётся ТЕХНИЧЕСКИЙ УРОВЕНЬ CampSpace (токены/motion/доступность), а не буквальные цвета. Палитра в OKLCH. Свет — дневное использование; тьма — вечернее (продукт уже знает theme light/dark/system). Тёмная тема применяется двумя путями: 1) автоматически по системе — @media (prefers-color-scheme: dark); 2) явным выбором пользователя — [data-theme="dark"] / [data-theme="light"] (ставится на из preferences.theme; light/dark перекрывают систему). */ /* Слой микроанимаций — ОБЩИЙ с CampSpace (web/motion.css здесь == web/css/motion.css там, байт в байт). Тему он не знает: берёт длительности, кривые и цвета из этого файла, поэтому Hearth получает своё звучание, а движение — единое. Канон: ANIMATION_GUIDELINES.md. */ @import url("motion.css"); :root { /* ── Поверхности (свет) ───────────────────────────────────── bg — почти-белый с лёгкой подкраской в hue бренда (сливовый), а НЕ в «тепло по умолчанию» (это отличает от cream-дефолта). */ --bg: oklch(0.985 0.006 350); /* фон приложения — розово-белый, не cream */ --bg-sunk: oklch(0.965 0.008 350); /* утопленные зоны, поля ввода */ --surface: oklch(0.998 0.003 350); /* карточки/панели — почти чистый белый */ --surface-2: oklch(0.975 0.007 350); /* вторичные панели, hover-строки */ --surface-inv: oklch(0.24 0.03 345); /* тёмная плашка на светлой теме (герой-блок) */ --glass: oklch(0.998 0.003 350 / 0.72); /* стекло — редко и осознанно */ /* ── Текст (свет) ─────────────────────────────────────────── Проверено на контраст: ink/dim ≥ 4.5:1 на --bg (см. канон). */ --ink: oklch(0.24 0.03 345); /* основной текст — сливово-почти-чёрный */ --ink-dim: oklch(0.47 0.03 345); /* вторичный текст (≥4.5:1 на bg) */ --ink-ghost: oklch(0.60 0.025 345); /* только крупный/декоративный текст */ --ink-on-brand:oklch(0.99 0.01 350); /* текст на brand-заливке */ --ink-inv: oklch(0.97 0.008 350); /* текст на surface-inv */ --ink-inv-dim: oklch(0.78 0.02 345); /* ── Бренд и акценты ──────────────────────────────────────── brand — сливово-ягодный (mulberry): интимно, тепло, не «корпоративно». accent — абрикос/мёд: тёплый CTA-глоу (как заливка, не как мелкий текст). */ --brand: oklch(0.52 0.15 350); /* основной бренд */ --brand-strong: oklch(0.44 0.15 352); /* brand как текст на светлом (контраст) */ --brand-soft: oklch(0.95 0.03 350); /* мягкая плашка/чип */ --brand-mid: oklch(0.66 0.13 350); /* декоративные штрихи, границы-акценты */ --accent: oklch(0.80 0.13 70); /* абрикос — заливки/подсветка */ --accent-strong:oklch(0.50 0.11 60); /* accent как текст (контраст) */ --accent-soft: oklch(0.96 0.035 75); /* ── Семантика (свои оттенки, не Birch) ───────────────────── *-strong — вариант, безопасный как мелкий текст (≥4.5:1). */ --ok: oklch(0.62 0.11 155); --ok-strong: oklch(0.46 0.11 155); --ok-soft: oklch(0.95 0.04 155); --warn: oklch(0.75 0.13 78); --warn-strong: oklch(0.52 0.11 66); --warn-soft: oklch(0.96 0.05 82); --danger: oklch(0.58 0.16 22); --danger-strong: oklch(0.50 0.16 24); --danger-soft: oklch(0.95 0.04 22); --info: oklch(0.60 0.11 262); --info-strong: oklch(0.48 0.12 264); --info-soft: oklch(0.95 0.035 262); /* Слои календаря (свой семейный набор — мягкие, различимые, не кислотные) */ --layer-me: oklch(0.52 0.15 350); /* «я» — бренд */ --layer-partner: oklch(0.58 0.11 262); /* партнёр — перивинкл */ --layer-family: oklch(0.60 0.10 150); /* общий семейный — шалфей */ --layer-kids: oklch(0.72 0.13 78); /* дети — мёд */ --layer-work: oklch(0.52 0.04 300); /* работа — приглушённый лиловый */ /* ── Границы ────────────────────────────────────────────────*/ --line: oklch(0.24 0.03 345 / 0.10); --line-mid: oklch(0.24 0.03 345 / 0.16); --line-strong: oklch(0.24 0.03 345 / 0.24); --line-inv: oklch(0.99 0.01 350 / 0.12); /* ── Типографика ──────────────────────────────────────────── Пара по оси КОНТРАСТА (serif + sans), а не два похожих sans: Fraunces (тёплый мягкий serif) — заголовки/приветствия, характер очага; Inter — тело, максимальная читаемость на любом размере; JetBrains Mono — время/числа/моноширинные данные. */ --disp: 'Fraunces', 'Georgia', serif; --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; /* Типографическая шкала (clamp — плавно, потолок дисплея ≤ 6rem) */ --fs-display: clamp(2.2rem, 1.4rem + 3.4vw, 3.6rem); --fs-h1: clamp(1.7rem, 1.2rem + 2.1vw, 2.5rem); --fs-h2: clamp(1.35rem, 1.05rem + 1.3vw, 1.85rem); --fs-h3: clamp(1.15rem, 1.0rem + 0.6vw, 1.4rem); --fs-body: 1rem; --fs-sm: 0.875rem; --fs-xs: 0.78rem; --lh-tight: 1.12; --lh-body: 1.55; --measure: 68ch; /* потолок длины строки прозы */ /* ── Геометрия (мягче CampSpace — семейная теплота) ─────────*/ --r-sm: 10px; /* кнопки, чипы, nav */ --r: 16px; /* карточки, поля, ячейки */ --r-lg: 22px; /* крупные контейнеры */ --r-xl: 30px; /* модалки, hero-карточки */ --r-pill: 999px; /* Ритм отступов (варьируем для ритма, не монотонно) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* ── Тени (тёплые, подкрашены в hue бренда) ─────────────────*/ --shadow-sm: 0 1px 2px oklch(0.24 0.03 345 / 0.06), 0 1px 3px oklch(0.24 0.03 345 / 0.05); --shadow: 0 4px 14px oklch(0.24 0.03 345 / 0.08), 0 1px 4px oklch(0.24 0.03 345 / 0.06); --shadow-lg: 0 12px 36px oklch(0.24 0.05 345 / 0.12), 0 4px 12px oklch(0.24 0.03 345 / 0.08); --shadow-xl: 0 26px 64px oklch(0.24 0.06 345 / 0.16), 0 8px 22px oklch(0.24 0.04 345 / 0.10); --glow-brand: 0 6px 22px oklch(0.52 0.15 350 / 0.28); /* ── Motion (ease-out экспоненциальные; без bounce/elastic) ─ --spring — очень лёгкий овершут ТОЛЬКО для hover-микро, не для reveal. */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* reveal, выезд */ --ease-in: cubic-bezier(0.5, 0, 0.75, 0); --spring: cubic-bezier(0.34, 1.35, 0.5, 1); /* hover-микро (умеренный overshoot) */ --dur-fast: 0.16s; --dur: 0.28s; --dur-slow: 0.6s; /* ── Z-шкала (семантическая, не 999) ───────────────────────*/ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-backdrop: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; /* ── Layout ─────────────────────────────────────────────────*/ --nav-w: 248px; --topbar-h: 60px; color-scheme: light; } /* ── Тёмная тема «Hearth Night»: глубокий plum-ink вечер ──────*/ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } } :root:not([data-theme="light"]) { /* оставляем светлые значения по умолчанию; переопределяем ниже в media/attr */ } /* Общий блок тёмных значений — подключается и по системе, и по атрибуту */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: oklch(0.19 0.02 340); --bg-sunk: oklch(0.16 0.02 340); --surface: oklch(0.235 0.025 340); --surface-2: oklch(0.275 0.028 340); --surface-inv: oklch(0.95 0.01 340); --glass: oklch(0.235 0.025 340 / 0.72); --ink: oklch(0.95 0.012 340); --ink-dim: oklch(0.75 0.02 340); --ink-ghost: oklch(0.58 0.02 340); --ink-on-brand:oklch(0.15 0.02 340); --ink-inv: oklch(0.24 0.03 345); --ink-inv-dim: oklch(0.42 0.03 345); --brand: oklch(0.72 0.14 350); --brand-strong: oklch(0.80 0.13 350); --brand-soft: oklch(0.30 0.05 348); --brand-mid: oklch(0.60 0.13 350); --accent: oklch(0.80 0.12 72); --accent-strong:oklch(0.86 0.12 76); --accent-soft: oklch(0.32 0.05 70); --ok: oklch(0.72 0.12 158); --ok-strong: oklch(0.80 0.12 158); --ok-soft: oklch(0.30 0.05 158); --warn: oklch(0.80 0.12 80); --warn-strong: oklch(0.86 0.12 82); --warn-soft: oklch(0.32 0.05 78); --danger: oklch(0.68 0.15 24); --danger-strong: oklch(0.76 0.15 26); --danger-soft: oklch(0.30 0.06 24); --info: oklch(0.72 0.11 264); --info-strong: oklch(0.80 0.11 264); --info-soft: oklch(0.30 0.05 264); --layer-me: oklch(0.72 0.14 350); --layer-partner: oklch(0.72 0.11 264); --layer-family: oklch(0.74 0.10 152); --layer-kids: oklch(0.80 0.12 80); --layer-work: oklch(0.68 0.05 300); --line: oklch(0.95 0.012 340 / 0.10); --line-mid: oklch(0.95 0.012 340 / 0.16); --line-strong: oklch(0.95 0.012 340 / 0.26); --line-inv: oklch(0.24 0.03 345 / 0.14); --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.35); --shadow: 0 4px 14px oklch(0 0 0 / 0.45), 0 1px 4px oklch(0 0 0 / 0.35); --shadow-lg: 0 12px 36px oklch(0 0 0 / 0.55), 0 4px 12px oklch(0 0 0 / 0.40); --shadow-xl: 0 26px 64px oklch(0 0 0 / 0.60), 0 8px 22px oklch(0 0 0 / 0.45); --glow-brand: 0 6px 26px oklch(0.72 0.14 350 / 0.35); } } /* Явный выбор пользователя (перекрывает систему) */ [data-theme="dark"] { color-scheme: dark; --bg: oklch(0.19 0.02 340); --bg-sunk: oklch(0.16 0.02 340); --surface: oklch(0.235 0.025 340); --surface-2: oklch(0.275 0.028 340); --surface-inv: oklch(0.95 0.01 340); --glass: oklch(0.235 0.025 340 / 0.72); --ink: oklch(0.95 0.012 340); --ink-dim: oklch(0.75 0.02 340); --ink-ghost: oklch(0.58 0.02 340); --ink-on-brand:oklch(0.15 0.02 340); --ink-inv: oklch(0.24 0.03 345); --ink-inv-dim: oklch(0.42 0.03 345); --brand: oklch(0.72 0.14 350); --brand-strong: oklch(0.80 0.13 350); --brand-soft: oklch(0.30 0.05 348); --brand-mid: oklch(0.60 0.13 350); --accent: oklch(0.80 0.12 72); --accent-strong:oklch(0.86 0.12 76); --accent-soft: oklch(0.32 0.05 70); --ok: oklch(0.72 0.12 158); --ok-strong: oklch(0.80 0.12 158); --ok-soft: oklch(0.30 0.05 158); --warn: oklch(0.80 0.12 80); --warn-strong: oklch(0.86 0.12 82); --warn-soft: oklch(0.32 0.05 78); --danger: oklch(0.68 0.15 24); --danger-strong: oklch(0.76 0.15 26); --danger-soft: oklch(0.30 0.06 24); --info: oklch(0.72 0.11 264); --info-strong: oklch(0.80 0.11 264); --info-soft: oklch(0.30 0.05 264); --layer-me: oklch(0.72 0.14 350); --layer-partner: oklch(0.72 0.11 264); --layer-family: oklch(0.74 0.10 152); --layer-kids: oklch(0.80 0.12 80); --layer-work: oklch(0.68 0.05 300); --line: oklch(0.95 0.012 340 / 0.10); --line-mid: oklch(0.95 0.012 340 / 0.16); --line-strong: oklch(0.95 0.012 340 / 0.26); --line-inv: oklch(0.24 0.03 345 / 0.14); --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.35); --shadow: 0 4px 14px oklch(0 0 0 / 0.45), 0 1px 4px oklch(0 0 0 / 0.35); --shadow-lg: 0 12px 36px oklch(0 0 0 / 0.55), 0 4px 12px oklch(0 0 0 / 0.40); --shadow-xl: 0 26px 64px oklch(0 0 0 / 0.60), 0 8px 22px oklch(0 0 0 / 0.45); --glow-brand: 0 6px 26px oklch(0.72 0.14 350 / 0.35); } /* ── Базовые связки (можно импортировать вместе с токенами) ──*/ *, *::before, *::after { box-sizing: border-box; } body { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { font-family: var(--disp); line-height: var(--lh-tight); letter-spacing: -0.02em; /* пол ≥ -0.04em */ text-wrap: balance; /* ровные строки заголовков */ } p { text-wrap: pretty; max-width: var(--measure); } /* меньше «сирот» */ /* Доступность: видимый фокус для клавиатуры — обязательно */ :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); } :focus:not(:focus-visible) { outline: none; }