/* ============================================================ AI Sense Teacher — дизайн-токены (перенос из Claude Design) Флюид-система: размеры плавно масштабируются через clamp(), производные цвета считаются через color-mix(in oklab, …). Совместимость: у КАЖДОГО «умного» значения статический px/hex фолбэк объявлен строкой ВЫШЕ — старые браузеры игнорируют незнакомую строку и остаются на постоянной синей теме. Переключатель тем показывается только там, где есть color-mix (проверка в dashboard.js), поэтому у всех всё работает. ============================================================ */ :root{ /* ---- Базовая тема «Синяя» (midnight) — она же постоянный фолбэк ---- */ --bg:#0f1226; --panel:#171a35; --bg2:#1b2048; --fg:#eef0ff; --muted:#9aa0c7; --accent:#6c7bff; --accent-2:#4a59e0; --on-accent:#ffffff; /* текст на акцентной заливке */ --bubble-me-fg:#ffffff; /* текст моих сообщений в чате */ --ok:#3ddc84; --err:#ff5c7a; --gold:#ffcf5c; --warn:#ffb454; /* ---- Шрифты: Lora — интерфейс, Playfair Display — контент ---- */ --font-display:'Lora', Georgia, 'Times New Roman', serif; --font-body:'Playfair Display', Georgia, 'Times New Roman', serif; /* ---- Флюид-типографика (px-фолбэк, затем clamp) ---- */ --text-xs:12px; --text-xs:clamp(11px, calc(0.68rem + 0.15vw), 12.5px); --text-sm:14px; --text-sm:clamp(13px, calc(0.78rem + 0.25vw), 15px); --text-base:16px; --text-base:clamp(15px, calc(0.9rem + 0.4vw), 17px); --text-lg:18px; --text-lg:clamp(17px, calc(0.95rem + 0.9vw), 22px); --text-xl:24px; --text-xl:clamp(21px, calc(1.1rem + 1.6vw), 30px); --text-2xl:32px; --text-2xl:clamp(26px, calc(1.3rem + 2.6vw), 42px); /* ---- Флюид-отступы (база ~4px) ---- */ --space-1:5px; --space-1:clamp(4px, 0.5vw, 6px); --space-2:10px; --space-2:clamp(8px, 1vw, 12px); --space-3:14px; --space-3:clamp(12px, 1.6vw, 18px); --space-4:20px; --space-4:clamp(16px, 2.2vw, 26px); --space-5:30px; --space-5:clamp(24px, 3.2vw, 40px); --space-6:44px; --space-6:clamp(32px, 4.5vw, 60px); /* ---- Скругления и тени ---- */ --radius-sm:10px; --radius:16px; --radius:clamp(14px, 1.2vw, 18px); --radius-lg:22px; --radius-lg:clamp(18px, 2vw, 26px); --shadow:0 18px 40px rgba(0,0,0,.32); --shadow-sm:0 6px 18px rgba(0,0,0,.22); /* ---- Ширина контента ---- */ --measure:68ch; --app-max:1200px; /* ---- Производные поверхности: hex-фолбэк (синий), затем color-mix ---- */ --line:rgba(154,160,199,.16); --line:color-mix(in oklab, var(--muted) 22%, transparent); --panel-2:#232853; --panel-2:color-mix(in oklab, var(--accent) 22%, var(--panel)); --chip-bg:#20254c; --chip-bg:color-mix(in oklab, var(--accent) 16%, var(--panel)); --bubble-me:#2b3170; --bubble-me:color-mix(in oklab, var(--accent) 34%, var(--panel)); --popup:#1d2147; --popup:color-mix(in oklab, var(--accent) 12%, var(--bg2)); --card-top:#20244a; --card-top:color-mix(in oklab, var(--fg) 5%, var(--panel)); --skel-1:#20244a; --skel-1:color-mix(in oklab, var(--fg) 6%, var(--panel)); --skel-2:#2a2f55; --skel-2:color-mix(in oklab, var(--fg) 12%, var(--panel)); --glow-1:rgba(108,123,255,.22); --glow-1:color-mix(in oklab, var(--accent) 22%, transparent); --glow-2:rgba(74,89,224,.16); --glow-2:color-mix(in oklab, var(--accent-2) 16%, transparent); --btn-glow:rgba(108,123,255,.4); --btn-glow:color-mix(in oklab, var(--accent) 40%, transparent); --ring:0 0 0 3px rgba(108,123,255,.55); --ring:0 0 0 3px color-mix(in oklab, var(--accent) 55%, transparent); } /* ---------- Темы (класс вешается на ) ---------- Внутри тем фолбэки не нужны: переключатель доступен только браузерам с поддержкой color-mix — производные цвета выше пересчитаются от новых базовых сами. */ .theme-emerald{ --bg:#0a1712; --panel:#12261d; --bg2:#123024; --fg:#ecfff5; --muted:#8fb7a4; --accent:#3ddc84; --accent-2:#26a664; --on-accent:#06231a; --bubble-me-fg:#ecfff5; } .theme-rose { --bg:#180f15; --panel:#291822; --bg2:#33202b; --fg:#ffeef4; --muted:#c79aad; --accent:#ff6b9d; --accent-2:#d6437a; --on-accent:#31121f; --bubble-me-fg:#ffeef4; } .theme-amber { --bg:#161009; --panel:#271d12; --bg2:#33260f; --fg:#fff4e6; --muted:#c7ab8f; --accent:#ffb454; --accent-2:#e08a2b; --on-accent:#2b1c07; --bubble-me-fg:#fff4e6; } .theme-daylight{ --bg:#f3f0e9; --panel:#ffffff; --bg2:#efece3; --fg:#211d17; --muted:#6f6a5f; --accent:#b5651d; --accent-2:#8f4f16; --on-accent:#fff8ef; --bubble-me-fg:#fff8ef; --shadow:0 14px 34px rgba(90,70,40,.14); --shadow-sm:0 6px 16px rgba(90,70,40,.12); --line:color-mix(in oklab, var(--muted) 30%, transparent); --bubble-me:color-mix(in oklab, var(--accent) 78%, var(--panel)); }