/* ============================================================ ДИЗАЙН-ТОКЕНЫ — из дизайн-системы «Модерн-сказка» Нейтраль + переключение сторон через класс на . Перекраска стороны = смена набора --c-* переменных. ============================================================ */ :root { /* --- Нейтральные (до выбора стороны, общие блоки) --- */ --ink: #322C3B; /* основной текст */ --ink-secondary: #6A6377; /* вторичный текст */ --ink-caption: #9A93A8; /* подписи / иконки */ --surface: #F6F4FA; /* фон-поверхность */ --surface-white: #FFFFFF; /* --- Цвет стороны (по умолчанию = нейтральный сиренево-серый) --- Переопределяется в .side-ivan / .side-kristina. */ --c-deep: #6A6377; --c-primary: #8A6CB0; --c-accent: #B8A4D4; --c-tint: #F6F4FA; --c-tint-ink: var(--ink); /* текст на tint-фоне */ --c-on-primary: #FFFFFF; /* текст на кнопке primary */ /* Фон всей страницы (v2) — перекрашивается при выборе стороны. Нейтраль: мягкий сиренево-серый wash. */ --page-bg-1: #EAE3F4; /* верх градиента (чуть насыщеннее) */ --page-bg-2: #F7F4FC; /* низ градиента */ --page-glow: rgba(184, 164, 212, 0.22); /* радиальное свечение сверху */ /* Небосвод: насыщенность тёмной зоны вокруг светила + цвет свечения */ --sky-deep: rgba(70, 55, 110, 0.18); --sky-glow-color: rgba(255, 250, 235, 0.75); /* --- Типографика --- */ --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; --fs-h1: clamp(40px, 11vw, 64px); --fs-h2: clamp(30px, 7vw, 38px); --fs-h3: clamp(24px, 5.5vw, 30px); --fs-lead: 18px; --fs-body: 15px; --fs-small: 13px; --fs-caption: 12px; --ls-label: 0.34em; /* letter-spacing для лейблов */ /* --- Форма и отступы --- */ --radius: 14px; /* кнопки, карточки */ --radius-pill: 999px; /* pill */ --radius-arch: 14px 14px 120px 120px; /* арка-панель */ /* Шкала отступов: 4 · 8 · 12 · 16 · 24 · 32 */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; /* Падинги экрана */ --pad-screen: 24px; /* Тень карточки */ --shadow-card: 0 24px 60px -28px rgba(50, 40, 70, 0.35); --shadow-soft: 0 8px 24px -12px rgba(50, 40, 70, 0.25); /* Плавная перекраска при смене стороны */ --transition-side: 360ms cubic-bezier(0.4, 0, 0.2, 1); } @media (min-width: 768px) { :root { --pad-screen: 64px; } } /* --- Сторона Ивана — сиреневый --- */ .side-ivan { --c-deep: #6D4F96; --c-primary: #8A6CB0; --c-accent: #B8A4D4; --c-tint: #EFE8F6; --c-tint-ink: #3D3350; --c-on-primary: #FFFFFF; /* сиреневый wash фона */ --page-bg-1: #E4D8F2; --page-bg-2: #F4EEFA; --page-glow: rgba(138, 108, 176, 0.30); /* ночное небо — глубокий фиолет, чтобы полумесяц ярко читался */ --sky-deep: rgba(48, 36, 86, 0.42); --sky-glow-color: rgba(206, 198, 245, 0.6); } /* --- Сторона Кристины — жёлтый --- На жёлтом фоне текст тёмный (#443A18) для контраста. */ .side-kristina { --c-deep: #8F6A12; /* затемнён для контраста текста/подписей на жёлтом (v3) */ --c-primary: #E6B93F; --c-accent: #F0D165; --c-tint: #FBF3D6; --c-tint-ink: #443A18; --c-on-primary: #443A18; /* тёплый жёлтый wash фона */ --page-bg-1: #FBF1CF; --page-bg-2: #FFFBEE; --page-glow: rgba(230, 185, 63, 0.30); /* тёплое дневное небо — солнце на янтарном свечении */ --sky-deep: rgba(196, 140, 30, 0.22); --sky-glow-color: rgba(255, 214, 120, 0.78); }