/* tokens.css — Calendar · tool-style design tokens (rebuilt 2026-07-09) Local, self-contained. Mirrors the site's /tool/ visual language: white bg, 13px density, single lime accent, Geologica/Onest/JetBrains Mono. */ @import url('https://fonts.googleapis.com/css2?family=Geologica:wght@300;400;500;600;700;800&family=Onest:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* Ink (neutral) */ --ink-950:#0A0A0A; --ink-900:#171717; --ink-800:#262626; --ink-700:#404040; --ink-600:#525252; --ink-500:#737373; --ink-400:#A3A3A3; --ink-300:#D4D4D4; --ink-200:#E5E5E5; --ink-150:#EDEDED; --ink-100:#F5F5F5; --ink-50:#FAFAFA; --white:#FFFFFF; /* Signal — electric lime (sole accent) */ --lime:#C5FF1A; --lime-600:#B7F500; --lime-200:#E6FF99; --lime-100:#F1FFCC; --lime-glow:rgba(197,255,26,0.55); --lime-ring:rgba(197,255,26,0.28); /* Structural dark (solid buttons / active) */ --accent:#181b25; --accent-600:#232735; --accent-on:#ffffff; /* Surfaces */ --bg-page:var(--white); --bg-section:var(--ink-50); /* Fonts */ --font-display:'Geologica','Onest',system-ui,sans-serif; --font-body:'Onest',system-ui,-apple-system,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace; /* Type scale (tool density) */ --fs-xs:11px; --fs-sm:12px; --fs-base:13px; --fs-md:14px; --fs-lg:16px; --fs-xl:22px; --fs-2xl:clamp(24px,2.4vw,32px); --fs-3xl:clamp(28px,3.4vw,40px); /* Spacing (tool scale) */ --sp-1:4px; --sp-2:6px; --sp-3:8px; --sp-4:10px; --sp-5:14px; --sp-6:18px; --sp-7:24px; --sp-8:32px; --sp-9:40px; --sp-12:56px; /* Radii */ --r-1:4px; --r-2:6px; --r-3:8px; --r-4:12px; --r-pill:999px; /* Layout */ --content-max-w:1280px; /* Borders — колонки/бордеры пишем как `1px solid var(--border)`, поэтому --border это ЦВЕТ, не shorthand (так же его использует инлайн-JS). */ --border:var(--ink-200); --border-strong:var(--ink-300); /* Shadows (flat, tool) */ --shadow-flat:0 1px 2px rgba(10,10,10,0.04); --shadow-card:0 1px 2px rgba(10,10,10,0.04),0 12px 28px rgba(10,10,10,0.05); --shadow-card-hover:0 2px 4px rgba(10,10,10,0.05),0 18px 36px rgba(10,10,10,0.07); --shadow-modal:0 18px 40px rgba(10,10,10,0.08),0 2px 8px rgba(10,10,10,0.04); /* Motion */ --ease-out:cubic-bezier(0.2,0.8,0.2,1); --ease-spring:cubic-bezier(0.34,1.56,0.64,1); --dur-1:120ms; --dur-2:220ms; --dur-3:360ms; /* ── Legacy aliases — keep inline JS styles (var(--…)) resolving ── */ --surface:var(--white); --bg:var(--ink-50); --fg:var(--ink-950); --muted:var(--ink-500); --border-color:var(--ink-200); --accent-color:var(--lime); --success:var(--lime-600); --danger:#c2410c; } /* ────────────────────────────────────────────────────────────── Тёмная тема — переопределяем только переменные (компоненты на токенах, поэтому разметку/стили трогать не нужно). Активируется атрибутом data-theme="dark" на (ставит prefs.js + инлайн- бутстрап в partials/header.php ещё до отрисовки, без вспышки). Шкала ink инвертирована: ink-950 = почти белый (текст), ink-50 = почти чёрный (тонкая подложка). Лайм-акцент сохранён. ────────────────────────────────────────────────────────────── */ :root[data-theme="dark"] { /* Инвертированная нейтральная шкала (950 = светлый текст → 50 = тёмный фон) */ --ink-950:#F5F5F5; --ink-900:#E8E8E8; --ink-800:#D0D0D0; --ink-700:#B0B0B0; --ink-600:#8C8C8C; --ink-500:#7A7A7A; --ink-400:#5C5C5C; --ink-300:#3A3A3A; --ink-200:#2C2C2C; --ink-150:#262626; --ink-100:#1E1E1E; --ink-50:#181818; --white:#121212; /* Структурный «акцент»: на тёмном фоне — светлая заливка с тёмным текстом */ --accent:#F5F5F5; --accent-600:#E4E4E4; --accent-on:#121212; /* Поверхности */ --bg-page:#121212; --bg-section:#181818; /* Бордеры */ --border:#2C2C2C; --border-strong:#3A3A3A; /* Тени (на тёмном фоне светятся мягче и глубже) */ --shadow-flat:0 1px 2px rgba(0,0,0,0.5); --shadow-card:0 1px 2px rgba(0,0,0,0.5),0 12px 28px rgba(0,0,0,0.45); --shadow-card-hover:0 2px 4px rgba(0,0,0,0.55),0 18px 36px rgba(0,0,0,0.55); --shadow-modal:0 18px 40px rgba(0,0,0,0.6),0 2px 8px rgba(0,0,0,0.5); /* Legacy-алиасы (инлайн-JS читает var(--surface)/var(--bg)/var(--fg)) */ --surface:#181818; --bg:#121212; --fg:#F5F5F5; --muted:#8C8C8C; --border-color:#2C2C2C; --danger:#f97316; color-scheme: dark; }