/* ============================================================ Casinoay — Дизайн-токены (Felt & Gold) Светлая тема по умолчанию (:root); тёмная — свап через [data-theme="dark"] на . Золото = ТОЛЬКО Score Chip (signature). CTA = оранжевый. Бренд = сукно (зелёный). ============================================================ */ :root { /* --- Шрифты (self-host, см. fonts.css) --- */ --font-display: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif; /* заголовки, счёт */ --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* текст, UI */ --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* данные, лейблы */ /* --- Шкала кеглей (1rem = 16px) --- */ --fs-caption: 0.8125rem; /* 13 */ --fs-sm: 0.875rem; /* 14 */ --fs-base: 1rem; /* 16 */ --fs-lead: 1.125rem; /* 18 */ --fs-h4: 1.25rem; /* 20 */ --fs-h3: 1.5rem; /* 24 */ --fs-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2rem); /* 28 → 32 */ --fs-h1: clamp(2.25rem, 1.5rem + 3vw, 2.75rem); /* 36 → 44 */ --fs-display: clamp(2.75rem, 1.6rem + 5vw, 4.5rem); /* 44 → 72 (счёт / герой) */ /* --- Начертания / интерлиньяж / трекинг --- */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; --lh-tight: 1.12; --lh-snug: 1.3; --lh-base: 1.6; --ls-tight: -0.02em; /* крупные заголовки */ --ls-caps: 0.08em; /* eyebrow / моно-лейблы */ --measure: 68ch; /* комфортная длина строки чтения */ /* --- Радиусы --- */ --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-pill: 999px; /* --- Отступы (сетка 4px) --- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ /* --- Контейнеры --- */ --container: 1200px; --container-narrow: 760px; /* === ЦВЕТ — светлая === */ --bg: #F6F7F4; /* холодный офф-вайт (не тёплый крем) */ --surface: #FFFFFF; --surface-2: #EEF1EC; /* альт. подложка, зебра таблиц */ --border: #E0E5DE; --border-strong: #C8D0C7; --ink: #13211B; /* заголовки */ --text: #39433D; /* основной текст */ --muted: #6B7670; /* подписи */ --brand: #0E5A3C; /* сукно: ссылки, структура, логотип */ --brand-strong: #0A3F2B; /* hover / нажатие */ --brand-tint: #E7F0EA; /* мягкая подложка-выделение */ --gold: #E0A82E; /* ТОЛЬКО Score Chip (signature) */ --gold-deep: #B6831C; /* кольцо / тень фишки */ --cta: #F26A1F; /* кнопка «Играть» */ --cta-ink: #1F1405; /* текст на CTA (тёмный — гарантирует контраст) */ --cta-hover: #DA5A12; --pos: #1B9E54; /* плюсы */ --neg: #D2483D; /* минусы */ --focus: #1763C9; /* кольцо фокуса */ /* Score Chip (theme-aware семантика) */ --chip-bg: #0E4D34; --chip-ring: var(--gold); --chip-score: var(--gold); --chip-label: rgba(255, 255, 255, 0.72); /* Тени */ --shadow-sm: 0 1px 2px rgba(19, 33, 27, 0.06), 0 1px 1px rgba(19, 33, 27, 0.04); --shadow-md: 0 4px 16px rgba(19, 33, 27, 0.08), 0 2px 6px rgba(19, 33, 27, 0.05); color-scheme: light; } /* === ЦВЕТ — тёмная (свап одних и тех же переменных) === */ [data-theme="dark"] { --bg: #0E1512; /* зелёно-чёрный, не чистый чёрный */ --surface: #16201B; --surface-2: #1D2922; --border: #243029; --border-strong: #324035; --ink: #F2F5F1; --text: #C2CCC5; --muted: #8A968E; --brand: #2FBE78; /* ярче для читаемости ссылок на тёмном */ --brand-strong: #54D08F; --brand-tint: #16271F; --gold: #F0BE4B; --gold-deep: #C99A2E; --cta: #F47A2A; --cta-ink: #1A1205; --cta-hover: #FF8C42; --pos: #2FBE78; --neg: #F0655A; --focus: #5B9BFF; --chip-bg: #0A3F2B; --chip-ring: var(--gold); --chip-score: var(--gold); --chip-label: rgba(255, 255, 255, 0.72); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4); color-scheme: dark; }