/* ============================================================ * xcore_front — design tokens * * :root — shared (неизменное между темами). * html / [data-theme=light] — light pack (дефолт). * [data-theme=dark] — dark override. * * Тема выставляется FOUC-guard'ом в header.php: если в * localStorage лежит 'xcore-theme' = 'dark' — добавляет * data-theme="dark" на до первого paint. Иначе * атрибута нет → срабатывает `html` селектор (light). * * Цветовые значения — из _design/claude_design_v2. * ============================================================ */ :root { --accent-h: 268; --radius: 14px; --density: 1; --grad: linear-gradient(135deg, #5B3FE0 0%, #8E6BFF 45%, #C084FC 100%); --font-sans: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; --container: 1440px; --container-pad: 40px; } /* Light — default */ html, html[data-theme="light"] { --bg: oklch(0.985 0.003 285); --bg-2: oklch(0.965 0.005 285); --surface: oklch(1 0 0); --surface-2: oklch(0.965 0.005 285); --surface-3: oklch(0.93 0.008 285); --line: oklch(0.86 0.01 285); --line-soft: oklch(0.91 0.008 285 / 0.9); --text: oklch(0.17 0.015 285); --text-2: oklch(0.38 0.012 285); --text-3: oklch(0.55 0.01 285); --accent: oklch(0.55 0.23 var(--accent-h)); --accent-2: oklch(0.50 0.25 var(--accent-h)); --accent-3: oklch(0.45 0.25 var(--accent-h)); --accent-dim: oklch(0.55 0.23 var(--accent-h) / 0.10); --accent-line: oklch(0.55 0.23 var(--accent-h) / 0.30); --success: oklch(0.52 0.17 155); --warning: oklch(0.66 0.16 65); --danger: oklch(0.58 0.22 25); --header-bg: oklch(1 0 0 / 0.82); --shadow-card: 0 16px 40px -12px oklch(0.3 0.05 285 / 0.14); --ambient-1: oklch(0.75 0.18 280 / 0.18); --ambient-2: oklch(0.80 0.14 220 / 0.14); /* Tonal art tiles — пока не используются, заложены для V2-плиток. */ --art-l1: 0.97; --art-l2: 0.93; --art-ca: 0.05; --art-cb: 0.03; --art-glow-l: 0.80; --art-glow-c: 0.15; --art-glow-a: 0.28; --art-text-l: 0.32; --art-text-c: 0.22; --art-label-bg: oklch(1 0 0 / 0.75); --art-label-text-l: 0.35; --art-mono: oklch(0.55 0.01 285 / 0.8); --hero-l1: 0.97; --hero-l2: 0.94; --hero-rad1-a: 0.28; --hero-rad2-a: 0.22; --promo-l1: 0.97; --promo-l2: 0.94; --promo-rad-a: 0.25; } /* Dark — альтернатива через тумблер */ html[data-theme="dark"] { --bg: oklch(0.150 0.015 285); --bg-2: oklch(0.130 0.013 285); --surface: oklch(0.195 0.018 285); --surface-2: oklch(0.235 0.020 285); --surface-3: oklch(0.285 0.022 285); --line: oklch(0.320 0.020 285); --line-soft: oklch(0.260 0.018 285 / 0.7); --text: oklch(0.97 0.005 285); --text-2: oklch(0.75 0.01 285); --text-3: oklch(0.58 0.01 285); --accent: oklch(0.68 0.22 var(--accent-h)); --accent-2: oklch(0.76 0.18 calc(var(--accent-h) + 15)); --accent-3: oklch(0.55 0.24 calc(var(--accent-h) - 10)); --accent-dim: oklch(0.68 0.22 var(--accent-h) / 0.14); --accent-line: oklch(0.68 0.22 var(--accent-h) / 0.35); --success: oklch(0.76 0.16 155); --warning: oklch(0.80 0.15 70); --danger: oklch(0.72 0.20 25); --header-bg: oklch(0.15 0.015 285 / 0.78); --shadow-card: 0 16px 40px -12px oklch(0.1 0.05 280 / 0.6); --ambient-1: oklch(0.45 0.20 280 / 0.22); --ambient-2: oklch(0.45 0.20 300 / 0.14); --art-l1: 0.35; --art-l2: 0.20; --art-ca: 0.12; --art-cb: 0.04; --art-glow-l: 0.70; --art-glow-c: 0.25; --art-glow-a: 0.35; --art-text-l: 0.92; --art-text-c: 0.08; --art-label-bg: oklch(0.1 0.01 285 / 0.5); --art-label-text-l: 0.85; --art-mono: rgba(255, 255, 255, 0.5); --hero-l1: 0.18; --hero-l2: 0.15; --hero-rad1-a: 0.35; --hero-rad2-a: 0.30; --promo-l1: 0.20; --promo-l2: 0.17; --promo-rad-a: 0.30; } /* Sync native UA (scrollbars, autofill, form controls) to theme. */ html { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; }