/* * Дизайн-токены сайта SpeechCat. * * Светлая (по умолчанию) + тёмная (через [data-theme="dark"] на ). * Тема выставляется FOUC-скриптом в v-top.php до первой отрисовки — * читает localStorage 'sc-theme', иначе берёт prefers-color-scheme. * * Цветовая палитра — тёплая бумага + чернильный инк + синий акцент. * Используем oklch — лучше воспринимается, проще выводить производные оттенки. * * Правило: компоненты ВСЕГДА используют переменные --sc-*, никаких голых * oklch/#hex с привязкой к теме. Если нужен новый оттенок под конкретную * секцию (например, мягкий glow на hero) — заводим токен здесь и переопределяем * его в [data-theme="dark"] ниже, не пишем хардкод в файле компонента. */ :root { /* Бумага / фон */ --sc-paper: oklch(0.985 0.005 90); --sc-paper-2: oklch(0.97 0.006 85); --sc-paper-3: oklch(0.945 0.008 85); /* Текст / линии */ --sc-ink: oklch(0.2 0.02 250); --sc-ink-2: oklch(0.42 0.015 250); --sc-ink-3: oklch(0.62 0.012 250); --sc-ink-4: oklch(0.78 0.008 250); --sc-line: oklch(0.9 0.008 250); --sc-line-2: oklch(0.83 0.012 250); /* Акцент */ --sc-accent: oklch(0.55 0.14 255); --sc-accent-hover: oklch(0.5 0.15 255); --sc-accent-soft: oklch(0.95 0.03 255); --sc-accent-soft-2: oklch(0.9 0.05 255); --sc-accent-ink: oklch(0.32 0.1 255); /* Семантика */ --sc-green: oklch(0.6 0.13 150); --sc-green-soft: oklch(0.95 0.04 150); --sc-green-ink: oklch(0.4 0.1 150); --sc-amber: oklch(0.72 0.13 75); --sc-amber-soft: oklch(0.96 0.05 75); --sc-amber-ink: oklch(0.4 0.13 75); --sc-red: oklch(0.58 0.18 25); --sc-red-soft: oklch(0.96 0.04 25); --sc-red-ink: oklch(0.4 0.15 25); /* Цвета говорящих */ --sc-sp1: oklch(0.5 0.12 250); --sc-sp1-soft: oklch(0.94 0.03 250); --sc-sp2: oklch(0.52 0.14 300); --sc-sp2-soft: oklch(0.95 0.03 300); --sc-sp3: oklch(0.5 0.1 160); --sc-sp3-soft: oklch(0.94 0.03 160); /* Радиусы */ --sc-r-sm: 8px; --sc-r: 10px; --sc-r-lg: 14px; --sc-r-xl: 20px; /* Тени */ --sc-shadow-soft: 0 4px 24px -8px oklch(0.18 0.05 250 / 0.12); --sc-shadow-pop: 0 30px 80px -20px oklch(0.18 0.05 250 / 0.35); --sc-shadow-hover: 0 8px 32px -8px oklch(0.18 0.05 250 / 0.16); --sc-shadow-focus: 0 8px 32px -8px oklch(0.55 0.14 255 / 0.18); --sc-shadow-inset: 0 1px 2px oklch(0.18 0.05 250 / 0.08); /* Декор: мягкие радиальные пятна на hero (фон секции). */ --sc-glow-1: oklch(0.97 0.01 250); --sc-glow-2: oklch(0.96 0.012 255); /* Шрифты */ --sc-font-sans: 'Inter Tight', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --sc-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Контентная ширина */ --sc-container: 1100px; --sc-container-wide: 1200px; /* Подсказка браузеру для нативных контролов (форм, скроллбара дефолтного, autofill). */ color-scheme: light; } /* ============================================================ */ /* Тёмная тема */ /* ============================================================ */ [data-theme="dark"] { /* Бумага / фон */ --sc-paper: oklch(0.18 0.015 250); --sc-paper-2: oklch(0.22 0.018 250); --sc-paper-3: oklch(0.26 0.02 250); /* Текст / линии */ --sc-ink: oklch(0.97 0.005 250); --sc-ink-2: oklch(0.78 0.01 250); --sc-ink-3: oklch(0.62 0.012 250); --sc-ink-4: oklch(0.45 0.015 250); --sc-line: oklch(0.32 0.018 250); --sc-line-2: oklch(0.4 0.02 250); /* Акцент */ --sc-accent: oklch(0.7 0.15 255); --sc-accent-hover: oklch(0.78 0.16 255); --sc-accent-soft: oklch(0.3 0.08 255); --sc-accent-soft-2: oklch(0.36 0.1 255); --sc-accent-ink: oklch(0.85 0.1 255); /* Семантика — основной цвет светлее (для иконок/маркеров на тёмном), *-soft уходит в тёмный тинт (фон пилюль), *-ink — текст на этом фоне. */ --sc-green: oklch(0.78 0.13 150); --sc-green-soft: oklch(0.3 0.06 150); --sc-green-ink: oklch(0.85 0.1 150); --sc-amber: oklch(0.85 0.13 75); --sc-amber-soft: oklch(0.3 0.06 75); --sc-amber-ink: oklch(0.88 0.13 75); --sc-red: oklch(0.72 0.16 25); --sc-red-soft: oklch(0.3 0.08 25); --sc-red-ink: oklch(0.85 0.13 25); /* Цвета говорящих */ --sc-sp1: oklch(0.78 0.12 250); --sc-sp1-soft: oklch(0.3 0.06 250); --sc-sp2: oklch(0.78 0.12 300); --sc-sp2-soft: oklch(0.32 0.07 300); --sc-sp3: oklch(0.78 0.1 160); --sc-sp3-soft: oklch(0.3 0.06 160); /* Тени — на тёмном фоне делаем плотнее (alpha больше, цвет — чёрный). */ --sc-shadow-soft: 0 4px 24px -8px oklch(0 0 0 / 0.5); --sc-shadow-pop: 0 30px 80px -20px oklch(0 0 0 / 0.7); --sc-shadow-hover: 0 8px 32px -8px oklch(0 0 0 / 0.55); --sc-shadow-focus: 0 8px 32px -8px oklch(0.7 0.15 255 / 0.35); --sc-shadow-inset: 0 1px 2px oklch(0 0 0 / 0.4); /* Декор hero — едва заметные пятна цвета. */ --sc-glow-1: oklch(0.22 0.04 250); --sc-glow-2: oklch(0.21 0.04 255); color-scheme: dark; }