/* ============================================================ AUTOBODY — theme tokens Vibe / accent / font are switched via data-* on , driven by the Tweaks panel. Everything else reads var()s. ============================================================ */ /* ---- fonts (all carry Cyrillic) ---- */ @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;700;800;900&family=Manrope:wght@400;500;600;700;800&family=Oswald:wght@400;500;600;700&family=Onest:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700;800&family=Golos+Text:wght@400;500;600;700;800&display=swap'); :root { /* type — overridden by [data-font] */ --font-head: 'Unbounded', system-ui, sans-serif; --font-body: 'Manrope', system-ui, sans-serif; --head-weight: 800; --head-spacing: -0.02em; /* accent — overridden by [data-accent] */ --accent: #FF4D2E; --accent-ink: #ffffff; --accent-soft: rgba(255, 77, 46, 0.14); /* surfaces — overridden by [data-vibe] (garage default) */ --bg: #0B0C0F; --bg-2: #0E0F13; --surface: #15171D; --surface-2: #1C1F27; --line: rgba(255, 255, 255, 0.10); --line-strong: rgba(255, 255, 255, 0.18); --fg: #F4F6FA; --fg-dim: #969CA8; --fg-faint: #5C616C; --shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8); --grid-dot: rgba(255, 255, 255, 0.05); /* danger / kasko side stays consistent across vibes */ --warn: #FF5B5B; /* sizing */ --radius: 22px; --radius-sm: 14px; --maxw: 1240px; --gut: clamp(20px, 5vw, 64px); } /* ============== VIBE: GARAGE (dark premium) ============== */ :root[data-vibe="garage"] { --bg: #0B0C0F; --bg-2: #0E0F13; --surface: #15171D; --surface-2: #1C1F27; --line: rgba(255, 255, 255, 0.10); --line-strong: rgba(255, 255, 255, 0.18); --fg: #F4F6FA; --fg-dim: #969CA8; --fg-faint: #5C616C; --grid-dot: rgba(255, 255, 255, 0.05); --shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.85); --hero-glow: 0.55; } /* ============== VIBE: LIGHT (clean studio) ============== */ :root[data-vibe="light"] { --bg: #EEF0F4; --bg-2: #F6F7F9; --surface: #FFFFFF; --surface-2: #F1F3F7; --line: rgba(12, 16, 28, 0.10); --line-strong: rgba(12, 16, 28, 0.18); --fg: #0D1017; --fg-dim: #545B68; --fg-faint: #969CAA; --grid-dot: rgba(12, 16, 28, 0.06); --shadow: 0 30px 70px -34px rgba(20, 26, 40, 0.30); --hero-glow: 0.28; } /* ============== VIBE: BOLD (max contrast) ============== */ :root[data-vibe="bold"] { --bg: #060606; --bg-2: #0A0A0A; --surface: #101010; --surface-2: #181818; --line: rgba(255, 255, 255, 0.12); --line-strong: rgba(255, 255, 255, 0.26); --fg: #FFFFFF; --fg-dim: #9A9A9A; --fg-faint: #5E5E5E; --grid-dot: rgba(255, 255, 255, 0.06); --shadow: 0 30px 90px -30px rgba(0, 0, 0, 0.9); --hero-glow: 0.7; --head-weight: 900; --head-spacing: -0.035em; } /* ============== VIBE: PREMIUM (dark luxury) ============== */ :root[data-vibe="premium"] { --bg: #0A0908; --bg-2: #100E0C; --surface: #16130F; --surface-2: #1E1A15; --line: rgba(214, 196, 160, 0.14); --line-strong: rgba(214, 196, 160, 0.28); --fg: #F4EFE6; --fg-dim: #A99F8E; --fg-faint: #6E6557; --grid-dot: rgba(214, 196, 160, 0.05); --shadow: 0 40px 90px -34px rgba(0, 0, 0, 0.85); --hero-glow: 0.4; --champagne: #D8C49A; --head-spacing: -0.025em; } /* ============== ACCENTS ============== */ :root[data-accent="red"] { --accent: #FF4D2E; --accent-ink: #fff; --accent-soft: rgba(255,77,46,.14); } :root[data-accent="lime"] { --accent: #C6FF3A; --accent-ink: #0A0A0A; --accent-soft: rgba(198,255,58,.16); } :root[data-accent="blue"] { --accent: #2E9BFF; --accent-ink: #fff; --accent-soft: rgba(46,155,255,.16); } :root[data-accent="amber"]{ --accent: #FFB000; --accent-ink: #0A0A0A; --accent-soft: rgba(255,176,0,.16); } /* ============== FONTS ============== */ :root[data-font="unbounded"] { --font-head: 'Unbounded', sans-serif; --font-body: 'Manrope', sans-serif; --head-weight: 800; --head-spacing: -0.02em; } :root[data-font="oswald"] { --font-head: 'Oswald', sans-serif; --font-body: 'Onest', sans-serif; --head-weight: 700; --head-spacing: 0.005em; } :root[data-font="mono"] { --font-head: 'JetBrains Mono', monospace;--font-body: 'Golos Text', sans-serif; --head-weight: 800; --head-spacing: -0.04em; } :root[data-font="manrope"] { --font-head: 'Manrope', sans-serif; --font-body: 'Manrope', sans-serif; --head-weight: 800; --head-spacing: -0.03em; }