/* ============================================================================ * tokens.css — КАНОН токен-системы для гемблинг-шаблонов * Загружается на КАЖДОЙ странице первым (перед компонентами и скинами). * * Архитектура (3 слоя): * Layer 1 — ПРИМИТИВЫ (skin-independent): шкалы spacing/type/radius/motion. * Layer 2 — СЕМАНТИКА (задаётся скином): bg/text/brand/state/shadow/fonts. * Дефолт здесь = скин "editorial-light". Прочие скины — в skins.css. * Layer 3 — BRIDGE: алиасы, чтобы готовая разметка из скила html-rating-guide * (--c-primary/--c-accent/--c-text/--danger/--success) резолвилась * без правок. * * Переключение скина: ... (см. skins.css) * Акцент под бренд: (override --brand) * Акцент под кластер: * Источники значений: casino-originals/assets/css/tokens.css (база, WCAG-AA), * theme-factory палитры, foundations.md §4. * ========================================================================== */ :root { /* ---------- Layer 1 — ПРИМИТИВЫ (одинаковы во всех скинах) ---------- */ /* Type scale (fluid) */ --t-display: clamp(1.95rem, 4.2vw, 3.1rem); /* под длинные RU-заголовки (было 40-72px) */ --t-h1: clamp(2rem, 4.5vw, 3.25rem); --t-h2: clamp(1.5rem, 2.6vw, 2rem); --t-h3: clamp(1.15rem, 1.7vw, 1.35rem); --t-h4: 1.05rem; --t-body: 1.0625rem; --t-small: 0.875rem; --t-tiny: 0.75rem; /* Line heights */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-base: 1.6; --lh-loose: 1.75; /* Font weights (semantic, value mapping in skin) */ --fw-body: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* Spacing scale (8pt grid + editorial generous) */ --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; --s-10: 128px; --s-11: 192px; /* Layout */ --container: 1280px; --container-wide: 1440px; --container-prose: 72ch; --gutter: clamp(16px, 4vw, 48px); /* Geometry */ --r-sharp: 0; --r-soft: 6px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px; --r-pill: 999px; /* Header / chrome */ --header-h: 72px; /* Z-index ladder */ --z-base: 1; --z-sticky: 50; --z-header: 100; --z-popover: 200; --z-modal: 1000; --z-toast: 1100; /* Motion */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-quick: 150ms; --dur-base: 220ms; --dur-slow: 400ms; /* Touch target (a11y) */ --tap-min: 44px; /* ---------- Layer 2 — СЕМАНТИКА · дефолтный скин: editorial-light ---------- */ /* Surfaces — warm "paper" */ --bg: #fbf8f1; /* main background */ --bg-2: #f4efe2; /* alt sections */ --bg-3: #ece5d2; /* deeper bands */ --surface: #ffffff; /* cards */ --surface-2: #f4efe2; /* alt cards */ --surface-3: #ece5d2; /* deepest */ /* Text — deep ink (WCAG-AA on --bg) */ --text: #15130f; --text-dim: #322d22; --text-mute: #5a543f; --text-faint: #87795f; --on-brand: #ffffff; /* text on brand-filled surfaces */ /* Lines */ --rule: #c8be9c; --rule-strong: #a89866; --hairline: 1px solid var(--rule); /* Brand + accents (editorial gold) */ --brand: #a17a1c; --brand-2: #3d6090; --brand-soft: rgba(161, 122, 28, 0.10); --accent: #a17a1c; --gold: #a17a1c; --crimson: #9b3434; --forest: #486f48; --steel: #3d6090; --plum: #6e4d8c; --highlight-pale: #fff7d6; /* State tokens (добавлены — у editorial-базы их не было) */ --success: #1d7a52; --success-soft: rgba(29, 122, 82, 0.12); --danger: #b5302b; --danger-soft: rgba(181, 48, 43, 0.12); --warning: #b5780a; --warning-soft: rgba(181, 120, 10, 0.14); --info: #2f6db0; --info-soft: rgba(47, 109, 176, 0.12); /* Рейтинг-бар: градиент danger→success (как в html-rating-guide) */ --rating-from: var(--danger); --rating-to: var(--success); /* Shadows (добавлены) */ /* Верхняя 1px световая линия (premium edge) — переопределяется в скине */ --surface-hi: rgba(255,255,255,.75); --border-highlight: inset 0 1px 0 var(--surface-hi); /* Тени — многослойные (structure + ambient) + inset-хайлайт = премиум-глубина. */ --shadow-card: var(--border-highlight), 0 1px 2px -1px rgba(21,19,15,.10), 0 14px 30px -14px rgba(21,19,15,.16); --shadow-pop: var(--border-highlight), 0 4px 10px -4px rgba(21,19,15,.12), 0 24px 50px -16px rgba(21,19,15,.22); --shadow-lift: var(--border-highlight), 0 30px 64px -20px rgba(21,19,15,.28); --shadow-glow: 0 10px 38px -10px color-mix(in srgb, var(--brand) 30%, transparent); /* Стекло (frosted) */ --glass-blur: blur(14px); --glass-bg: rgba(255,255,255,.78); --glass-border: rgba(200,190,156,.55); /* Градиенты */ --grad-brand: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 60%, var(--brand-2))); --grad-text: linear-gradient(100deg, var(--brand), var(--brand-2)); --surface-grad: linear-gradient(180deg, color-mix(in srgb, var(--brand) 5%, transparent), transparent 64%); /* Амбиентное свечение фона страницы (мягкие радиальные пятна по углам) */ --ambient: radial-gradient(58% 48% at 86% -8%, var(--brand-soft), transparent 70%), radial-gradient(46% 40% at -4% 2%, color-mix(in srgb, var(--brand-2) 7%, transparent), transparent 72%); /* Font stacks */ --font-display: "Newsreader", "Source Serif Pro", Georgia, "Times New Roman", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; } /* ---------- Layer 3 — BRIDGE (алиасы для html-rating-guide и легаси) ---------- * Объявлены на body (не :root) НАМЕРЕННО: так они резолвят --brand с учётом * как скина (html[data-skin]), так и per-brand оверрайда (body[data-brand]). */ body { --c-primary: var(--brand); --c-primary-alpha: var(--brand-soft); --c-accent: var(--accent); --c-text: var(--text-mute); --c-danger: var(--danger); --c-success: var(--success); --radius: var(--r-lg); } /* ---------- Per-brand accent overrides (совместимо с casino-originals) ---------- * Меняют ТОЛЬКО акцент, не ломая скин. Контраст выверен под светлый фон. */ body[data-brand="stake"] { --brand: #1c6fb8; --brand-2: #047a5f; --brand-soft: rgba(28,111,184,.08); } body[data-brand="duel"] { --brand: #b8265a; --brand-2: #b07505; --brand-soft: rgba(184,38,90,.08); } body[data-brand="shuffle"] { --brand: #5a32a5; --brand-2: #0c7891; --brand-soft: rgba(90,50,165,.08); } body[data-brand="rollbit"] { --brand: #b54b1f; --brand-2: #a88114; --brand-soft: rgba(181,75,31,.08); } body[data-brand="betfury"] { --brand: #b27e0a; --brand-2: #a83644; --brand-soft: rgba(178,126,10,.10); } body[data-brand="roobet"] { --brand: #a8780a; --brand-2: #1c5594; --brand-soft: rgba(168,120,10,.10); } body[data-brand="gamdom"] { --brand: #2d8c5b; --brand-2: #b04a30; --brand-soft: rgba(45,140,91,.08); } body[data-brand="winna"] { --brand: #16785b; --brand-2: #ad7c14; --brand-soft: rgba(22,120,91,.10); } body[data-brand="fairspin"] { --brand: #1d59a7; --brand-2: #6630a8; --brand-soft: rgba(29,89,167,.08); } /* Per-cluster blog accents */ body[data-cluster="blog-rankings"] { --brand: #a17a1c; --brand-2: #486f48; } body[data-cluster="blog-fairness"] { --brand: #486f48; --brand-2: #3d6090; } body[data-cluster="blog-strategy"] { --brand: #9b3434; --brand-2: #a17a1c; } body[data-cluster="blog-tokens"] { --brand: #6e4d8c; --brand-2: #a17a1c; } body[data-cluster="blog-comparison"] { --brand: #3d6090; --brand-2: #9b3434; } /* Reduced-motion (a11y baseline) */ @media (prefers-reduced-motion: reduce) { :root { --dur-quick: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } }