/* ============================================================ Hub 443 — Design Tokens Единый источник стиля. Все шаблоны и страницы тянут отсюда. Тёмная тема — основная (:root). Светлая — [data-theme="light"]. ============================================================ */ :root { /* --- Сырая палитра (бренд) ------------------------------- */ --c-charcoal: #090E0B; /* base / самый тёмный фон */ --c-surface: #16201F; /* поверхность карточек */ --c-bottle: #16352A; /* bottle green, глубокий */ --c-teal: #145049; /* teal-emerald, основной бренд*/ --c-gold: #BBA47D; /* champagne gold, акцент */ --c-gold-bright: #D8C49A; /* золотой глиф / свечение */ --c-grey: #9CA7A4; /* приглушённый текст */ --c-text: #E5EAE8; /* основной текст на тёмном */ /* светлая тема (вторичная) */ --c-light-bg: #EAEDEC; --c-light-primary: #134A43; --c-light-gold: #9C7E3A; --c-light-ink: #122019; /* --- Семантические токены (тёмная тема) ------------------ */ --color-bg: var(--c-charcoal); --color-surface: var(--c-surface); --color-surface-2: #1d2a28; --color-primary: var(--c-teal); --color-primary-deep: var(--c-bottle); --color-accent: var(--c-gold); --color-accent-bright: var(--c-gold-bright); --color-accent-text: var(--c-gold); /* золото для текста (тёмная тема) */ --color-muted: #A6B2AF; /* приподнят контраст на surface */ --color-text: var(--c-text); --color-text-strong: #F3F6F4; --color-border: rgba(187, 164, 125, 0.18); /* gold @ low alpha */ --color-border-strong: rgba(187, 164, 125, 0.38); /* свечение и атмосфера */ --glow-gold: radial-gradient(120% 90% at 50% -10%, rgba(216,196,154,0.16) 0%, rgba(216,196,154,0) 55%); --velvet-depth: radial-gradient(140% 120% at 50% 40%, #16352A 0%, #0E1714 45%, #090E0B 100%); /* --- Типографика ---------------------------------------- */ --font-display: "Playfair Display", Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-label: "Montserrat", "Inter", system-ui, sans-serif; /* модульная шкала (база 16px, шаг ~1.25) */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.375rem; /* 22 */ --text-2xl: 1.75rem; /* 28 */ --text-3xl: 2.25rem; /* 36 */ --text-4xl: 3rem; /* 48 */ --text-5xl: 4rem; /* 64 */ --text-6xl: 5.5rem; /* 88 — герой / wordmark */ --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.6; --tracking-tight: -0.02em; --tracking-wide: 0.04em; --tracking-caps: 0.18em; /* Montserrat-лейблы капсом */ --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; /* --- Спейсинг (база 4px) -------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; --space-32: 8rem; /* --- Радиусы -------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full: 999px; /* --- Тени (тёмная тема) --------------------------------- */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.45); --shadow-md: 0 6px 20px rgba(0,0,0,0.40); --shadow-lg: 0 18px 50px rgba(0,0,0,0.50); --shadow-gold: 0 10px 40px rgba(187,164,125,0.12); /* --- Раскладка ------------------------------------------ */ --container: 1120px; --container-sm: 720px; /* --- Движение ------------------------------------------- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --transition: 220ms var(--ease); } /* ============================================================ Светлая тема — вторичная Применяется на или контейнере. ============================================================ */ [data-theme="light"] { --color-bg: var(--c-light-bg); --color-surface: #F4F6F5; --color-surface-2: #FFFFFF; --color-primary: var(--c-light-primary); --color-primary-deep: #0E3A34; --color-accent: var(--c-light-gold); --color-accent-bright: #B8945A; --color-accent-text: #7A6128; /* тёмное золото для текста на светлом */ --color-muted: #4E5D58; /* приподнят контраст ≥4.5:1 */ --color-text: var(--c-light-ink); --color-text-strong: #0B1611; --color-border: rgba(18, 32, 25, 0.14); --color-border-strong: rgba(18, 32, 25, 0.28); --glow-gold: radial-gradient(120% 90% at 50% -10%, rgba(156,126,58,0.10) 0%, rgba(156,126,58,0) 55%); --velvet-depth: linear-gradient(180deg, #EEF1F0 0%, #E4E9E7 100%); --shadow-sm: 0 1px 2px rgba(18,32,25,0.10); --shadow-md: 0 6px 20px rgba(18,32,25,0.10); --shadow-lg: 0 18px 50px rgba(18,32,25,0.14); --shadow-gold: 0 10px 40px rgba(156,126,58,0.12); }