/* ============================================================= Дизайн-токены ШТУРМАНА — бренд церкви «Любовь Христа» (гайдлайн, версия 1, август 2026 · https://figma.com/design/uaf5RAf7...). Значения сверены напрямую со страницами 08–09 (цвет), 11 (шрифт), 17 (сетка), 20 (кнопки), 22 (карточки), 24 (иконки и отступы). Светлая — основная (с.08 «Палитра в числах», колонка СВЕТЛАЯ). [data-theme="dark"] — колонка ТЁМНАЯ той же страницы. ============================================================= */ :root { /* ---------- палитра (с.08–09) ---------- */ --bg: #FDF6EE; /* surface/base */ --surface: #FFFFFF; /* surface/raised — карточка, модалка */ --surface-2: #F5F3EE; /* surface/sunken — поле ввода, дорожка прогресса */ --surface-glass: rgba(253,246,238,0.88); --fg: #1C0D06; /* text/primary — заголовки */ --fg-muted: #644F43; /* text/secondary — основной текст */ --fg-dim: #755E49; /* text/muted — метка, подсказка, счётчик */ --fg-inverse: #F9F8F6; /* text/onGradient — текст поверх акцента/градиента */ --border: #E7DCCE; /* border/subtle — декоративная линия */ --border-strong: #948377; /* border/strong — поле ввода, дорожка прогресса */ --divider: #EFE5D6; /* Один акцент, появляется только там, где нужно действие (кнопка, ссылка, заполнение прогресса, с.09 «Где какой цвет»). */ --accent: #065365; /* accent/base */ --accent-on: #FDF6EE; /* надпись на кнопке — surface/base, не белый (с.09) */ --accent-deep: #013440; /* accent/hover */ --accent-press: #013440; /* нажатое состояние кнопки — то же, что hover */ --accent-soft: #CDE8EF; /* accent/soft — подложка выделенного */ --danger: #8C2F26; /* state/danger */ --danger-soft: rgba(140,47,38,0.12); --warn: #8A5A12; /* state/warning */ --warn-soft: rgba(138,90,18,0.12); --success: #40542F; /* state/success */ --success-soft: rgba(64,84,47,0.12); /* calm/later — в гайдлайне не заданы (там всего 3 состояния), выведены сами: calm из border/strong (нейтральный тон), later — приглушённый тон между accent и success, чтобы не путался с «выполнено». */ --calm: #948377; --calm-soft: rgba(148,131,119,0.14); --later: #4B6B63; --later-soft: rgba(75,107,99,0.14); --st-inbox: #948377; --st-doing: #065365; --st-done: #40542F; --st-snooze: #948377; /* ---------- типографика (с.11 «Три роли») ---------- Заголовки — Sofia Sans Extra Condensed, только Black (900). Текст — Commissioner, Regular/Medium (Medium — только выделение). Цитата Писания (Cormorant Italic) в интерфейсе доски не участвует — роль внутренняя, для интерфейса не назначена (правило «своя работа у каждого шрифта», с.11), поэтому не подключаем. Отдельной гарнитуры для меток гайдлайн не даёт — метки идут той же Commissioner, что и весь текст (с.11: «интерфейс, подписи, метки»). */ --font-display: 'Sofia Sans Extra Condensed', system-ui, sans-serif; --font-sans: 'Commissioner', system-ui, -apple-system, sans-serif; --font-mono: var(--font-sans); --fs-display: 34px; --fs-title: 30px; --fs-sub: 17px; --fs-lead: 15px; --fs-body: 15px; --fs-meta: 13px; --fs-label: 11px; --fs-11: 11px; --fs-12: 11px; --fs-13: 13px; --fs-14: 13px; --fs-15: 15px; --fs-17: 17px; --fs-20: 20px; --fs-22: 22px; --fs-28: 30px; --fs-34: 34px; --tr-display: -0.01em; --tr-title: -0.01em; --tr-body: 0; --tr-label: 0.03em; --lh-tight: 1.12; --lh-snug: 1.22; --lh-base: 1.5; /* ---------- геометрия (с.17 «Сетка и рамки») ---------- Радиусы буквально: панель/карточка 4, кнопка/поле 6 (не путать между собой — с.17). Иконка приложения и аватарка — отдельно, здесь не участвуют (используются напрямую в разметке). */ --r-card: 4px; --r-btn: 6px; --r-tag: 6px; --r-sm: 6px; --r-md: 6px; --r-lg: 4px; --r-xl: 4px; --r-pill: 9999px; /* ---------- глубина (с.17, с.24) ---------- «Тени не применяются. Слой поднимается цветом поверхности, а не размытием» — оба правила совпадают: обнуляем здесь один раз, это снимает box-shadow везде, где он взят из токена. */ --shadow-card: none; --shadow-float: none; --shadow-press: none; /* ---------- отступы (с.17, с.24) ---------- Шаг 4, разрешены только 8/16/24/32/48/64 — промежуточных нет. Внутри карточки 32, между карточками 24, между блоками 48. */ --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 16px; --s-5: 24px; --s-6: 24px; --s-7: 32px; --s-8: 48px; --safe-top: env(safe-area-inset-top); --safe-bot: env(safe-area-inset-bottom); } /* ============ ТЁМНАЯ ТЕМА (с.08, колонка ТЁМНАЯ) ============ */ [data-theme="dark"] { --bg: #042323; --surface: #0B3134; --surface-2: #021818; --surface-glass: rgba(4,35,35,0.88); --fg: #FDF6EE; --fg-muted: #B4CBD2; --fg-dim: #7E9AA1; --fg-inverse: #F9F8F6; --border: #15414C; --border-strong: #3E828D; --divider: #15414C; --accent: #7FB3C0; --accent-on: #042323; --accent-deep: #9CC5D0; --accent-press: #9CC5D0; --accent-soft: #15414C; --danger: #E0BB80; --danger-soft: rgba(224,187,128,0.16); --warn: #E0B579; --warn-soft: rgba(224,181,121,0.16); --success: #A6AF9C; --success-soft: rgba(166,175,156,0.16); --calm: #7E9AA1; --calm-soft: rgba(126,154,161,0.16); --later: #7FB3C0; --later-soft: rgba(127,179,192,0.16); --st-inbox: #7E9AA1; --st-doing: #7FB3C0; --st-done: #A6AF9C; --st-snooze: #7E9AA1; } /* ============ RESET ============ */ *, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } button, input, textarea, select { font: inherit; color: inherit; background: none; border: 0; padding: 0; } button { cursor: pointer; } ::selection { background: var(--accent); color: var(--accent-on); } .num, time { font-variant-numeric: tabular-nums; } .mono, .kicker { font-family: var(--font-sans); font-size: var(--fs-label); letter-spacing: var(--tr-label); text-transform: uppercase; }