/* ============================================================ CareHaven — tokens.css · "Linen & Sage" · light-only ------------------------------------------------------------ SOURCE OF TRUTH. Не выдумано: значения взяты из ПРИНЯТОЙ веб-дизайн- системы (spec-workflow агент "дизайн: система для веба") и сведены с правками трёх аудитов, зафиксированными в docs/12-web-start-spec.md §7: · B3 фокус-кольцо стало ДВОЙНЫМ (inner --bg + outer --focus-ring #243D30), т.к. одно sage-кольцо было невидимо на sage-заливке. · B4 --border-input = --border-strong #948C7C (было #D8D2C6 ≈1.5:1 — не проходило 3:1 для контура контрола). · B5 --text-tertiary допустим только ≥24px обычный / ≥19px bold. · 7.2 типо-шкала = ТРИ ступени S/M/L, ключ = min-width в REM (не px — иначе Windows-масштаб 125/150% сожмёт CSS-px и переключит ступень ошибочно). Никаких vw-шрифтов. Канон (НЕ менять): bg #F6F4EF · surface #FFFFFF · text #2B2823 · secondary #6F6A60 · border #E6E1D6 · accent #4E6E5D Шрифты: Outfit (display) · Geist (body) · JetBrains Mono (numbers) ============================================================ */ :root { color-scheme: light; /* -- Базовые поверхности -------------------------------------------- */ --bg: #F6F4EF; /* Linen Stone — фон приложения */ --surface: #FFFFFF; /* карточки/панели, приподнятые над фоном */ --surface-2: #EFEBE3; /* утопленные зоны: well, mono-чип, зебра, code charcoal 12.35 · driftwood 4.52 · sage 6.40 */ --surface-sunken:#EAE5DB; /* трек слайдера, скелетон-база, инпут-фон off */ /* -- Текст ----------------------------------------------------------- */ --text: #2B2823; /* Warm Charcoal · 13.36 на bg / 14.68 на white*/ --text-secondary:#6F6A60; /* Driftwood · 4.89 на bg / 5.38 на white (AA) */ --text-tertiary: #8B867C; /* подписи/мета · 3.62 на white — B5: ТОЛЬКО ≥24px обычный / ≥19px bold, никогда body */ --text-on-accent:#FFFFFF; /* на sage-заливке · 5.66 (AA) */ --text-disabled: #A8A399; /* WCAG-исключение для inactive-контролов */ /* -- Границы --------------------------------------------------------- */ --border: #E6E1D6; /* волосяной разделитель (декоративный) */ --border-strong: #948C7C; /* контур контрола · 3.33 white / 3.03 linen — 3:1 для чекбокса/radio/ghost-кнопки/таблицы */ --border-input: var(--border-strong); /* B4: контур инпута = 3:1 (#948C7C) */ /* -- АКЦЕНТ (единственный) Deep Sage Green --------------------------- */ --accent: #4E6E5D; /* primary CTA fill, active nav, verified pin */ --accent-hover: #43604F; /* 6.94 white — hover заливки */ --accent-active: #3A5344; /* 8.40 white — pressed */ --accent-text: #3D5A4A; /* ссылки/акцентный ТЕКСТ на светлом · 7.61 AAA */ --accent-050: #E9EFEB; /* tint-фон: selected-чип, verified-бейдж, hover*/ --accent-100: #DBE6DF; /* ghost-hover fill, выделенная строка */ --accent-disabled: #A9BBB0; /* sage-заливка в disabled-состоянии */ /* -- ФОКУС (B3: двойное кольцо, видимо и на sage-заливке) ------------ */ --focus-ring: #243D30; /* тёмно-шалфейный внешний контур фокуса */ --focus-inner: var(--bg); /* внутренняя разделительная линия */ /* -- ФУНКЦИОНАЛЬНЫЕ СТАТУСЫ (не акцент — правило одного акцента) ------ */ /* OCHRE = «ждёт / не сейчас»: availability=waitlist, claim pending, «ждут N семей», отсчёт триала/SLA. Никогда не CTA и не ссылка. */ --status-wait: #8A5A12; /* текст-охра · 5.91 white / 5.38 linen */ --status-wait-solid: #916012; /* заливка-чип с БЕЛЫМ текстом · 5.40 */ --status-wait-pin: #A56A16; /* точка/пин (UI-глиф 3:1, 4.49) */ --status-wait-bg: #F6EAD2; /* tint-чип · charcoal 12.32 / охра-текст 4.96*/ --status-wait-border: #E4C98A; /* RED (глиняно-охристый, НЕ неон) = «требует ответа / ошибка / срочно»: new inquiry, tour_requested у владельца, SLA-breach, form error, destructive confirm, «Позвонить» в кризисе, категория emergency. */ --status-alert: #A2321F; /* текст-красный · 6.97 white / 6.34 linen */ --status-alert-solid: #B23A2A; /* заливка-бейдж с БЕЛЫМ текстом · 5.95 */ --status-alert-bg: #F7E4DF; /* tint · charcoal 11.97 / red-text 5.68 */ --status-alert-border: #E7B3A8; /* SUCCESS/POSITIVE = семья акцента (verified/подтверждено). Отдельного зелёного НЕ вводим — это была бы вторая «зелёнка». Успех = --accent. */ --status-ok: var(--accent-text); --status-ok-bg: var(--accent-050); /* -- Пины карты (цвет ВЫЧИСЛЯЕТСЯ, не хранится) ---------------------- */ --pin-verified: #4E6E5D; /* зелёный ⇔ verified AND published (= accent) */ --pin-verified-ring:#3A5344; --pin-registry: #8C8577; /* серый: непартнёр/леджер (driftwood-семья) */ --pin-registry-ring:#6F6A60; --pin-wait-dot: var(--status-wait-pin); /* доп-точка waitlist на пине */ --cluster-bg: #5C6B62; /* нейтрально-шалфейный кластер, НЕ акцент */ --cluster-text: #FFFFFF; /* -- Оверлеи / скрим (тёплый charcoal, НЕ чистый #000) --------------- */ --scrim-modal: rgba(43,40,35,.48); /* модалка/шторка — изоляция фона */ --scrim-dropdown: rgba(43,40,35,.28); /* лёгкий dismiss для popover/меню */ --scrim-image: linear-gradient(180deg, rgba(43,40,35,0) 40%, rgba(43,40,35,.55) 100%); /* текст на фото */ /* -- Тени (тёплые, на базе charcoal — никаких чёрных) ---------------- */ --shadow-1: 0 1px 2px rgba(43,40,35,.06), 0 1px 1px rgba(43,40,35,.04); --shadow-2: 0 4px 12px rgba(43,40,35,.08), 0 2px 4px rgba(43,40,35,.05); --shadow-3: 0 12px 32px rgba(43,40,35,.14), 0 4px 8px rgba(43,40,35,.08); --shadow-4: 0 24px 60px rgba(43,40,35,.22), 0 8px 16px rgba(43,40,35,.10); /* B3: двойное кольцо — внутренняя --bg-линия + внешний тёмный контур */ --shadow-focus: 0 0 0 2px var(--focus-inner), 0 0 0 4px var(--focus-ring); /* -- Радиусы --------------------------------------------------------- */ --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; /* карточка */ --r-xl: 24px; /* верх шторки/модалки */ --r-pill: 999px; --r-input: 12px; /* -- Типографика: семейства ----------------------------------------- */ --font-display: "Outfit", ui-sans-serif, system-ui, sans-serif; --font-body: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; /* -- Типографика: шкала — СТУПЕНЬ S (default, < 48rem) --------------- */ /* px→rem от корня 16px. BODY = --fs-300. Ключ ступеней = rem, не px. */ --fs-100: 0.8125rem; /* 13 — мета, бейджи, юр-мелочь */ --fs-200: 0.9375rem; /* 15 — вторичный текст, подписи полей */ --fs-300: 1rem; /* 16 — BODY (ступень S) */ --fs-400: 1.1875rem; /* 19 — крупный body / lead / H4 */ --fs-500: 1.375rem; /* 22 — H3 */ --fs-600: 1.75rem; /* 28 — H2 */ --fs-700: 2.25rem; /* 36 — H1 */ --fs-800: 2.75rem; /* 44 — display (потолок ступени S) */ --lh-tight: 1.12; --lh-heading: 1.2; --lh-snug: 1.35; --lh-body: 1.55; --lh-relaxed: 1.65; --tracking-display: -0.02em; --tracking-h: -0.01em; --tracking-body: 0em; --tracking-caps: 0.06em; /* eyebrow/overline */ --weight-body: 400; --weight-medium: 500; --weight-label: 600; --weight-display: 600; /* Outfit SemiBold — канон */ /* -- Мера строки ----------------------------------------------------- */ --measure-prose: 68ch; /* лонгрид гидов ~640–720px */ --measure-narrow: 46ch; /* формы/интейк */ --measure-wide: 75ch; /* абсолютный потолок, десктоп */ /* -- Сетка / ритм 8 -------------------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --gutter: 16px; /* переопределяется по брейкпоинтам ниже */ --container-doc: 1120px; /* «документные» экраны */ --container-work: 1680px; /* «рабочие» экраны */ --rail-w: 240px; --rail-w-collapsed: 72px; --dossier-w: 460px; /* правая панель-досье на десктопе */ --touch: 44px; /* минимальный тач-таргет */ /* -- Движение -------------------------------------------------------- */ --dur-micro: 140ms; --dur-std: 220ms; --dur-complex: 340ms; --dur-exit: 160ms; /* ~70% от std */ --ease-decelerate: cubic-bezier(0.2, 0, 0, 1); /* вход */ --ease-accelerate: cubic-bezier(0.4, 0, 1, 1); /* выход */ --ease-standard: cubic-bezier(0.3, 0, 0, 1); --ease-spring: cubic-bezier(0.34, 1.3, 0.5, 1); /* шторка/модалка */ /* -- Слои ------------------------------------------------------------ */ --z-base: 0; --z-sticky: 10; --z-rail: 20; --z-dossier: 30; --z-overlay: 40; --z-modal: 50; --z-toast: 60; --z-max: 1000; } /* -- Типо-ступень M (≥ 48rem = 768px @16): base 17px ------------------- */ /* Шкала 13·15·17·20·24·32·44·56. Ключ REM, а не px (Windows-масштаб). */ @media (min-width: 48rem) { :root { --fs-100: 0.8125rem; /* 13 */ --fs-200: 0.9375rem; /* 15 */ --fs-300: 1.0625rem; /* 17 = BODY */ --fs-400: 1.25rem; /* 20 */ --fs-500: 1.5rem; /* 24 */ --fs-600: 2rem; /* 32 */ --fs-700: 2.75rem; /* 44 = H1 потолок десктопа */ --fs-800: 3.5rem; /* 56 = display, только лендинг */ } } /* -- Типо-ступень L (≥ 105rem = 1680px @16): base 18px ----------------- */ /* Шкала 14·16·18·21·26·34·46·58. */ @media (min-width: 105rem) { :root { --fs-100: 0.875rem; /* 14 */ --fs-200: 1rem; /* 16 */ --fs-300: 1.125rem; /* 18 = BODY */ --fs-400: 1.3125rem; /* 21 */ --fs-500: 1.625rem; /* 26 */ --fs-600: 2.125rem; /* 34 */ --fs-700: 2.875rem; /* 46 */ --fs-800: 3.625rem; /* 58 */ } } /* -- Гуттеры адаптивно (ритм 8) — ЛЭЙАУТ, ключ REM --------------------- */ @media (min-width: 48rem) { :root { --gutter: 24px; } } @media (min-width: 73.75rem) { :root { --gutter: 32px; } } /* 1180 */ @media (min-width: 105rem) { :root { --gutter: 40px; } } /* 1680 */ /* -- Досье-панель: одно значение per-брейк (spec §7.3 C5) -------------- */ @media (min-width: 105rem) { :root { --dossier-w: 520px; } } @media (min-width: 160rem) { :root { --dossier-w: 560px; } } /* 2560 */ /* -- prefers-reduced-motion: ОБЯЗАТЕЛЬНАЯ ветка (не опция) ------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }