/* ═══════════════════════════════════════════════════════════════ RZGAS v4 — Design Tokens · Warm Sand / Surface-first Palette: бренд v3 (blue/green) + тёплые песочные поверхности. ═══════════════════════════════════════════════════════════════ */ @layer tokens { :root { /* ═════════════════════════════════════════ БРЕНД (сохранён из v3) ═════════════════════════════════════════ */ /* Синий — доверие, инженерия, навигация/ссылки. Полная лесенка (борд «Цветовые решения РЖГ») */ --rz-primary-darker: #2E4A78; /* dark+ */ --rz-primary-dark: #3A5A8C; /* dark */ --rz-primary: #5880C0; /* base */ --rz-primary-mid: #9DB4DA; /* light */ --rz-primary-light: #E8EEF7; /* tint */ /* Зелёный — только главные CTA и «фишки». Держать редким. */ --rz-accent-darker: #5E7C10; /* dark+ */ --rz-accent-dark: #7AA318; /* dark */ --rz-accent: #95C11F; /* base */ --rz-accent-mid: #C2DD7E; /* light */ --rz-accent-light: #EEF5DA; /* tint */ /* Поддержка */ --rz-cyan: #06B6D4; /* градиент-акцент */ --rz-amber: #D9A648; /* субсидии, тёплые бейджи */ --rz-gold: #FFB800; /* рейтинги / звёзды */ /* On-dark — поднятые бренд-цвета для читаемости на тёмных полосах (Deep Ink) */ --rz-on-dark-accent: #A9D42F; /* зелёный CTA на тёмном */ --rz-on-dark-blue: #8FB0E0; /* синие ссылки/em на тёмном */ /* ═════════════════════════════════════════ ТЕКСТ (тёплые тона) ═════════════════════════════════════════ */ --rz-text-primary: #1A2332; --rz-text-secondary: #4A5568; --rz-text-muted: #8E8675; --rz-text-disabled: #BFB7A4; /* ═════════════════════════════════════════ WARM SAND SURFACES (v4) ═════════════════════════════════════════ */ --rz-paper: #EFE9DC; --rz-paper-soft: #F5F1E6; --rz-paper-2: #E5DDC9; /* Aliases для обратной совместимости */ --rz-bg-page: var(--rz-paper); --rz-bg-white: var(--rz-paper-soft); --rz-bg-alt: var(--rz-paper-2); --rz-bg-hero: #2A3F5F; --rz-bg-footer: #2A3F5F; /* ═════════════════════════════════════════ SURFACES ═════════════════════════════════════════ */ --rz-surface-0: var(--rz-paper-soft); --rz-surface-1: color-mix(in srgb, var(--rz-paper-soft) 60%, var(--rz-paper)); --rz-surface-2: var(--rz-paper-2); --rz-surface-elevated: var(--rz-paper-soft); /* ═════════════════════════════════════════ BORDERS & HAIRLINES (тёплые) ═════════════════════════════════════════ */ --rz-border: rgba(48, 38, 20, 0.10); --rz-border-dark: rgba(48, 38, 20, 0.18); --rz-hairline: rgba(48, 38, 20, 0.08); --rz-hairline-strong: rgba(48, 38, 20, 0.16); --rz-divider: rgba(48, 38, 20, 0.06); /* ═════════════════════════════════════════ FOCUS & GLOW ═════════════════════════════════════════ */ --rz-ring: color-mix(in srgb, var(--rz-primary) 22%, transparent); --rz-ring-accent: color-mix(in srgb, var(--rz-accent) 28%, transparent); --rz-ring-error: color-mix(in srgb, var(--rz-error) 25%, transparent); --rz-glow-primary: color-mix(in srgb, var(--rz-primary) 22%, transparent); --rz-glow-accent: color-mix(in srgb, var(--rz-accent) 28%, transparent); /* ═════════════════════════════════════════ GLASS ═════════════════════════════════════════ */ --rz-glass-light: rgba(245, 241, 230, 0.78); --rz-glass-dark: rgba(255, 255, 255, 0.08); /* ═════════════════════════════════════════ СЛУЖЕБНЫЕ ═════════════════════════════════════════ */ --rz-success: #10B981; --rz-warning: #E8A230; --rz-error: #DC3545; /* ═════════════════════════════════════════ ТИПОГРАФИКА ═════════════════════════════════════════ */ --rz-font-heading: 'Stolzl', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --rz-font-body: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Fluid */ --rz-fs-display: clamp(32px, 3.2vw, 52px); --rz-fs-h1: clamp(28px, 2.6vw, 42px); --rz-fs-h2: clamp(22px, 2.0vw, 34px); --rz-fs-h3: clamp(18px, 1.4vw, 22px); --rz-fs-h4: clamp(16px, 1.2vw, 18px); /* Static */ --rz-fs-body: 16px; --rz-fs-body-sm: 14px; --rz-fs-caption: 12px; --rz-fs-tiny: 11px; --rz-fs-button: 15px; --rz-fs-nav: 15px; /* Weights */ --rz-fw-regular: 400; --rz-fw-medium: 500; --rz-fw-semibold: 600; --rz-fw-bold: 700; /* Line heights */ --rz-lh-tight: 1.15; --rz-lh-snug: 1.25; --rz-lh-normal: 1.5; --rz-lh-relaxed: 1.65; /* Letter spacing */ --rz-ls-tight: -0.02em; --rz-ls-normal: 0; --rz-ls-wide: 0.02em; --rz-ls-wider: 0.06em; /* Measure */ --rz-measure: 72ch; --rz-measure-narrow: 56ch; --rz-measure-wide: 88ch; /* ═════════════════════════════════════════ РАДИУСЫ ═════════════════════════════════════════ */ --rz-radius-xs: 6px; --rz-radius-sm: 14px; --rz-radius: 22px; --rz-radius-lg: 26px; --rz-radius-xl: 32px; --rz-radius-pill: 9999px; --rz-radius-full: 50%; /* ═════════════════════════════════════════ ТЕНИ (нейтральные, тёплые) ═════════════════════════════════════════ */ --rz-shadow-none: none; --rz-shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 1px 2px rgba(26, 27, 28, 0.04); --rz-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 6px 18px -8px rgba(26, 27, 28, 0.10); --rz-shadow-md: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 12px 30px -12px rgba(26, 27, 28, 0.14); --rz-shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 18px 50px -20px rgba(26, 27, 28, 0.18), 0 4px 12px -6px rgba(26, 27, 28, 0.08); --rz-shadow-xl: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 28px 70px -24px rgba(26, 27, 28, 0.22); --rz-shadow-inset: inset 0 2px 6px rgba(26, 27, 28, 0.06), inset 0 -1px 0 rgba(255, 255, 255, 0.4); --rz-shadow-cta: 0 14px 40px -10px rgba(149, 193, 31, 0.45), 0 0 0 1px rgba(149, 193, 31, 0.4); --rz-shadow-dark: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 46px rgba(15, 23, 42, 0.3); /* ═════════════════════════════════════════ ОТСТУПЫ СЕКЦИЙ ═════════════════════════════════════════ */ --rz-section-xs-y: 2rem; --rz-section-xs-y-lg: 3rem; --rz-section-sm-y: 3rem; --rz-section-sm-y-lg: 4rem; --rz-section-y: 4rem; --rz-section-y-lg: 5rem; --rz-section-lg-y: 5rem; --rz-section-lg-y-lg: 7rem; --rz-section-gap: 140px; /* ═════════════════════════════════════════ Z-INDEX ═════════════════════════════════════════ */ --rz-z-dropdown: 100; --rz-z-sticky: 200; --rz-z-overlay: 300; --rz-z-modal: 400; --rz-z-toast: 500; /* ═════════════════════════════════════════ TRANSITIONS ═════════════════════════════════════════ */ --rz-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1); --rz-transition-spring: 450ms cubic-bezier(0.25, 0.46, 0.45, 0.94); --rz-transition-slow: 600ms cubic-bezier(0.4, 0, 0.2, 1); /* ═════════════════════════════════════════ CONTAINER ═════════════════════════════════════════ */ --rz-container-max: 1320px; --rz-container-padding: 1rem; /* ═════════════════════════════════════════ АЛИАСЫ v6 (короткие имена) v6 HTML использует --paper/--ink/--r/--line ═════════════════════════════════════════ */ --paper: var(--rz-paper); --paper-2: var(--rz-paper-2); --paper-soft: var(--rz-paper-soft); --ink: var(--rz-text-primary); --ink-2: var(--rz-text-secondary); --ink-3: var(--rz-text-muted); /* Тёмная подложка секций/карточек — тёмный бренд-синий (НЕ текст) */ --surface-dark: #2A3F5F; --line: var(--rz-hairline); --line-2: var(--rz-hairline-strong); --accent: var(--rz-accent); --accent-dark: var(--rz-accent-dark); --accent-mid: var(--rz-accent-mid); --blue: var(--rz-primary); --blue-dark: var(--rz-primary-dark); --blue-mid: var(--rz-primary-mid); --amber: var(--rz-amber); --gold: var(--rz-gold); --danger: #C84B4B; /* On-dark бренд-цвета (для тёмных полос) */ --on-dark-accent: var(--rz-on-dark-accent); --on-dark-blue: var(--rz-on-dark-blue); --r-sm: var(--rz-radius-sm); --r: var(--rz-radius); --r-lg: var(--rz-radius-lg); --r-xl: var(--rz-radius-xl); --r-pill: var(--rz-radius-pill); --shadow-soft: var(--rz-shadow-sm); --shadow-lift: var(--rz-shadow-lg); --inset: var(--rz-shadow-inset); --cta-shadow: var(--rz-shadow-cta); --font-h: var(--rz-font-heading); --font-b: var(--rz-font-body); --container: var(--rz-container-max); --gap-section: 140px; --ease: cubic-bezier(.2,.7,.2,1); --ease-spring: cubic-bezier(.2,.9,.3,1.4); --fg1: var(--rz-text-primary); --fg2: var(--rz-text-secondary); --fg3: var(--rz-text-muted); --bg: var(--rz-paper); --bg-card: var(--rz-paper-soft); } /* ─── Fallback для браузеров без color-mix() ─── */ @supports not (background: color-mix(in srgb, red, blue)) { :root { --rz-surface-1: #F0EBDF; --rz-hairline: rgba(48, 38, 20, 0.08); --rz-hairline-strong: rgba(48, 38, 20, 0.16); --rz-divider: rgba(48, 38, 20, 0.06); --rz-ring: rgba(88, 128, 192, 0.22); --rz-ring-accent: rgba(149, 193, 31, 0.28); --rz-ring-error: rgba(220, 53, 69, 0.25); --rz-glow-primary: rgba(88, 128, 192, 0.22); --rz-glow-accent: rgba(149, 193, 31, 0.28); } } }