/* * tokens.css — дизайн-токены сайта. * * Цветовая схема — «Классическая» (академическая бело-синяя), портирована из * проекта mindcare (src/styles/tokens/classic-{light,dark}.css) с переводом * легаси-алиасов (coffee/latte/espresso) в семантические имена. * * Тема выбирается атрибутом data-theme на : classic-light | classic-dark. * Ставится анти-FOUC скриптом в ещё до загрузки CSS (см. base_public.html), * поэтому вспышки светлой темы при тёмной системной настройке не бывает. */ /* ── Независимые от темы: типографика, раскладка, анимация ── */ :root { --fs-h1: clamp(28px, 3.2vw, 44px); --lh-h1: 1.15; --fs-h2: clamp(21px, 2.2vw, 30px); --lh-h2: 1.25; --fs-h3: clamp(17px, 1.4vw, 21px); --lh-h3: 1.35; --fs-body: clamp(15px, 0.95vw, 17px); --lh-body: 1.65; --fs-ui: clamp(14px, 0.9vw, 15px); --fs-sub: clamp(13px, 0.8vw, 14px); --lh-sub: 1.55; --ls-label: 0.08em; --container-max: 1120px; --container-px: clamp(16px, 4vw, 40px); --section-py: clamp(24px, 3vw, 40px); --gap: clamp(12px, 1.2vw, 18px); --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --focus-ring-width: 2px; --focus-ring-offset: 2px; /* Минимальная зона нажатия на сенсорных экранах */ --tap-target: 44px; } /* ── Светлая ── */ :root[data-theme='classic-light'] { color-scheme: light; --bg: #ffffff; --surface: #edf1f8; --surface-alt: #e4eaf3; --surface-elevated: #ffffff; --text-main: #1b2b45; --text-muted: #4a5a73; --text-light: #616e85; --text-on-primary: #ffffff; --primary: #2b5a9e; --primary-hover: #24467a; --primary-soft: #e4eaf3; --border: #d3dae6; --border-strong: #b9c4d6; --outline: #7c8aa1; --success: #2f7a46; --success-bg: #e7f3ea; --error: #b3261e; --error-bg: #fbeeec; --error-border: #fecaca; --warning-bg: #fef6de; --warning-text: #7a4e0b; --shadow-sm: 0 1px 3px rgba(27, 43, 69, 0.08); --shadow-md: 0 4px 14px rgba(27, 43, 69, 0.1); --shadow-lg: 0 14px 34px rgba(27, 43, 69, 0.16); --scrim: rgba(20, 34, 56, 0.45); } /* ── Тёмная ── */ :root[data-theme='classic-dark'] { color-scheme: dark; --bg: #101620; --surface: #18202c; --surface-alt: #222b3a; --surface-elevated: #19212f; --text-main: #e3e9f2; --text-muted: #b5c0d0; --text-light: #8794a6; --text-on-primary: #14243b; --primary: #8fb6e8; --primary-hover: #a9c8ee; --primary-soft: #1f2a3c; --border: #2a3444; --border-strong: #3e4a5e; --outline: #8794a6; --success: #7fbf95; --success-bg: #1e3125; --error: #e8938c; --error-bg: #3a2422; --error-border: #5a302e; --warning-bg: #3a3117; --warning-text: #e4c86b; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45); --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.55); --scrim: rgba(0, 0, 0, 0.6); }