/* ============================================================ theme.css — СЛОЙ ТЕМЫ (design tokens) для «Invest in Antalya». Айдентика взята из реального бренда продукта (src/styles.css): тёплый красный #C8102E (primary/CTA), шампань-золото #C9A227 (хэйрлайны/акцент), кремовый фон #FAFAF8, графитовый текст #2B2B2B. Настроение — спокойный средиземноморский люкс, агентство «с 2009». Дисплей — Fraunces (серотонин старой доброй брошюры), текст — Inter. :root = ТЁМНАЯ тема (по умолчанию), :root[data-theme="light"] = светлая. Контраст проверен по WCAG AA (см. отчёт /design) в обеих темах. Меняй значения — не структуру (набор токенов = контракт с styles.css). ============================================================ */ :root { /* ── Поверхности (тёмная: глубокий графит агентства премиум-класса) ── */ --bg: #111114; /* глубокий графит — фон страницы */ --bg-soft: #19191c; --sidebar: #09090b; /* фон бокового меню — ещё глубже, слой позади контента */ --sidebar-hover: #1a1a1d; /* ховер пункта меню */ --sidebar-line: #2a2a2e; /* разделители/рамки в сайдбаре */ --panel: #1a1a1d; /* фон карточек */ --panel-soft: #1f1f22; /* фон страницы, мягкие плашки */ --border: #2d2d31; --surface-2: #242427; /* серые плашки (чипы, инлайн-код фон) */ --topbar-bg: rgba(9,9,11,.85); /* фон верхней панели (полупрозрачный) */ /* ── Текст ── */ --text: #f3f1ea; /* тёплый белый (не чистый белый — бренд-крем) */ --text-soft: #c9c5b9; --text-mut: #a6a195; --sidebar-text: #d9d5c8; /* текст пунктов бокового меню */ --sidebar-text-mut: #8e897c; /* приглушённый текст в сайдбаре */ --on-accent: #1b1013; /* тёмный графит-вино — текст на ярких акцентных фонах */ /* ── Акцент (главный бренд-цвет — тёплый терракотовый красный) ── */ --accent: #f0555a; /* CTA/бренд-красный, приподнятый по светлоте под тёмный фон */ --accent-2: #e4b94d; /* champagne gold — второй тон для градиентов/аватаров */ --accent-soft: #3d1418; /* тёмная винная подложка акцента */ /* ── Семантика статусов (смысл сохраняется во всех темах) ── */ --green: #4fb877; --green-2: #6bcb8e; --green-soft: #173b26; --amber: #e4b94d; --amber-soft: #3b2c11; --red: #f0555a; --red-soft: #3d1418; --blue: #6fb2d6; --blue-soft: #122c38; /* ── Формы (тёплая витрина недвижимости — мягче, чем корпоративный интерфейс) ── */ --radius: 12px; --radius-lg: 20px; --shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 26px -12px rgba(0,0,0,.5); --shadow-lg: 0 2px 8px rgba(0,0,0,.3), 0 24px 48px -18px rgba(0,0,0,.6); /* ── Код ── */ --code-inline: #e4b94d; /* цвет инлайн-кода `код` — золото читается на тёмной панели */ --pre-bg: #09090b; /* фон блока кода — глубже панели, как ниша */ --pre-text: #f3f1ea; /* текст блока кода */ /* ── Типографика (бренд Invest in Antalya: Fraunces + Inter) ── */ --sans: 'Inter', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', system-ui, sans-serif; --mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', Consolas, monospace; --font-display: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif; /* заголовки — брендовый серотонин-сериф */ /* ── Мета ── */ --theme-color: #09090b; /* цвет строки браузера (моб.), = */ } /* ============================================================ СВЕТЛАЯ ВЕРСИЯ. Включается: . Кремовый фон, белые карточки, тёплый красный + шампань-золото — ровно палитра продукта (src/styles.css), но для витрины разработки. ============================================================ */ :root[data-theme="light"] { --bg: #fafaf8; /* кремовый фон (бренд-cream) */ --bg-soft: #f2f0e9; --sidebar: #fcfaf5; --sidebar-hover: #f3e9d0; /* тёплый золотистый ховер */ --sidebar-line: #e6e1d3; --panel: #ffffff; /* белые карточки, как в продукте */ --panel-soft: #f6f4ee; --border: #e2dfd6; --surface-2: #efebe1; --topbar-bg: rgba(250,250,248,.85); --text: #2b2b2b; /* графит (бренд-charcoal) */ --text-soft: #5c574c; --text-mut: #6e6858; --sidebar-text: #4a4638; --sidebar-text-mut: #6e6858; --on-accent: #ffffff; --accent: #c8102e; /* бренд-красный #C8102E */ --accent-2: #c39a26; /* champagne gold #C9A227 */ --accent-soft: #fbeae8; --green: #2a7040; --green-2: #3f8f53; --green-soft: #e2f0e5; --amber: #86560a; --amber-soft: #f8ecd4; --red: #c8102e; --red-soft: #fbeae8; --blue: #2a6284; --blue-soft: #deebf1; --shadow: 0 1px 2px rgba(43,43,42,.05), 0 8px 24px -12px rgba(43,43,42,.12); --shadow-lg: 0 2px 6px rgba(43,43,42,.05), 0 20px 44px -18px rgba(43,43,42,.16); --code-inline: #b01029; --pre-bg: #2b2b2b; /* тёмная ниша кода даже на светлой теме — редакционный приём бренда */ --pre-text: #f3f1ea; --theme-color: #fafaf8; }