/* ───────────────────────────────────────────────────────────────────────────── Дизайн-токены «Обиталь». Две темы — светлая и тёмная — переключаются атрибутом data-theme на (ставит инлайновый скрипт в , до первой отрисовки). Компоненты в main.css НЕ содержат ни одного хардкодного цвета: любой оттенок берётся отсюда, поэтому вторая тема не требует дублирования правил. Про палитру. Фон светлой темы тёплый (#FAF9F6), а не чистый белый: фотографии интерьеров на чистом белом выглядят выцветшими, а на тёплой бумаге — дороже. Акцент — глубокий изумруд; в тёмной теме он осветляется до мяты, потому что тёмный зелёный на тёмном фоне не проходит по контрасту. Латунь (--gold) используется точечно, только для тонких линий и мелких акцентов: золото в заливках мгновенно скатывается в «казино». ───────────────────────────────────────────────────────────────────────────── */ :root { /* Типографика ------------------------------------------------------------ */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Georgia — единственная системная антиква с приличной кириллицей, поэтому она первым фолбэком, а не абстрактный serif. */ --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; /* Отдельный стек для ЧИСЕЛ. Google Fonts в РФ регулярно недоступен, Playfair не приезжает — и всё, что набрано --font-display, отрисовывается Georgia. А у системной Georgia цифры только старостильные («текстовые»): 6 и 8 торчат вверх, 7 и 9 уходят под базовую линию, 1 и 2 в рост строчной. В заголовке это красиво, в «2 181» — выглядит как сбой шрифта. Починить через lining-nums нельзя: набора прописных цифр в Georgia физически нет. Поэтому у чисел свой фолбэк — Times New Roman: та же антиква с кириллицей, но цифры в рост прописной. Georgia оставлена в хвосте на случай, когда Times недоступен (Linux без msttcorefonts — там сработает Liberation). */ --font-numeric: 'Playfair Display', 'Times New Roman', 'Liberation Serif', 'DejaVu Serif', Georgia, serif; --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-base: 0.9375rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); --fs-2xl: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem); --fs-3xl: clamp(1.875rem, 1.4rem + 2.1vw, 3rem); --fs-hero: clamp(2.25rem, 1.5rem + 3.4vw, 4.25rem); --lh-tight: 1.12; --lh-snug: 1.32; --lh-base: 1.62; /* Ритм ------------------------------------------------------------------- */ --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; --shell: 1240px; --shell-narrow: 860px; --r-xs: 6px; --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; --header-h: 76px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur: 0.22s; } /* Светлая тема ------------------------------------------------------------- */ :root, :root[data-theme='light'] { color-scheme: light; --bg: #faf9f6; --bg-elev: #ffffff; --bg-sunken: #f1efe9; --bg-overlay: rgba(250, 249, 246, 0.86); --ink: #12161a; --ink-2: #48525a; --ink-3: #7d868d; --ink-inv: #ffffff; --line: #e6e2d9; --line-strong: #d2ccbf; --accent: #0f6146; --accent-hover: #0b4c36; --accent-soft: #e6f0ec; --accent-ink: #ffffff; --gold: #9c7b3c; --danger: #a8342b; --warn-bg: #fdf4e3; --warn-line: #e6cf9d; --warn-ink: #6d5210; --shadow-sm: 0 1px 2px rgba(18, 22, 26, 0.05); --shadow: 0 1px 2px rgba(18, 22, 26, 0.05), 0 10px 26px -14px rgba(18, 22, 26, 0.22); --shadow-lg: 0 2px 6px rgba(18, 22, 26, 0.06), 0 28px 60px -28px rgba(18, 22, 26, 0.3); --img-bg: #ece8e0; --scrim: linear-gradient(to top, rgba(10, 14, 12, 0.55), rgba(10, 14, 12, 0) 55%); } /* Тёмная тема -------------------------------------------------------------- */ :root[data-theme='dark'] { color-scheme: dark; --bg: #0c0f0e; --bg-elev: #141817; --bg-sunken: #090b0b; --bg-overlay: rgba(12, 15, 14, 0.88); --ink: #efede7; --ink-2: #a6afac; --ink-3: #79817f; --ink-inv: #0c0f0e; --line: #242928; --line-strong: #343a38; --accent: #57d6a4; --accent-hover: #77e4ba; --accent-soft: #11241d; --accent-ink: #04231a; --gold: #d8b571; --danger: #e4796e; --warn-bg: #241d0f; --warn-line: #4a3c1c; --warn-ink: #e3c98c; /* В тёмной теме тени не читаются — глубину даёт контур и лёгкое свечение. */ --shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.03); --shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 14px 34px -20px rgba(0, 0, 0, 0.9); --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 32px 70px -30px rgba(0, 0, 0, 1); --img-bg: #1c211f; --scrim: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0) 55%); } @media (prefers-reduced-motion: reduce) { :root { --dur: 0.001s; } * { animation-duration: 0.001s !important; transition-duration: 0.001s !important; } }