/* ============================================================ tokens.css — Knowledge Base Дизайн-токены: подключи одним на любой странице. Темa: dark по умолчанию, light через ============================================================ */ /* Шрифты подключаются отдельно (см. styles.css или ваш host) */ :root { /* ---------- Type scale (modular 1.25) ---------- */ --fs-12: 12px; --fs-14: 14px; --fs-16: 16px; --fs-20: 20px; --fs-25: 25px; --fs-31: 31px; --fs-39: 39px; --fs-49: 49px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-body: 1.6; --lh-tight: 1.2; --lh-ui: 1.4; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ---------- Spacing (4px base) ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; /* ---------- Radii ---------- */ --r-input: 4px; --r-button: 6px; --r-card: 8px; --r-modal: 12px; /* ---------- Layout ---------- */ --layout-sidebar: 260px; --layout-toc: 220px; --layout-content: 720px; --layout-max: 1320px; --layout-topbar: 52px; /* ---------- Transitions ---------- */ --t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1); --t-med: 200ms cubic-bezier(0.4, 0, 0.2, 1); /* ---------- Z-index ---------- */ --z-sticky: 10; --z-overlay: 100; --z-modal: 200; } /* ============================================================ DARK (default) ============================================================ */ :root, :root[data-theme="dark"] { /* Surfaces — слегка тёплый «уголь», не чёрный */ --bg-canvas: oklch(17% 0.008 250); /* фон страницы */ --bg-surface: oklch(21% 0.009 250); /* карточки, sidebar */ --bg-elevated: oklch(25% 0.010 250); /* hover, modal, вложенные карточки */ --bg-sunken: oklch(14% 0.008 250); /* подложка под кодом, zebra */ --bg-tint: oklch(20% 0.013 268); /* лёгкий синий-tint для featured-блоков */ /* Borders */ --border-subtle: oklch(28% 0.010 250); --border-strong: oklch(40% 0.013 250); /* Text */ --text-primary: oklch(96% 0.005 250); /* ~95% контраст */ --text-secondary: oklch(74% 0.008 250); /* ~70% */ --text-tertiary: oklch(56% 0.010 250); /* ~50%, метаданные */ --text-on-accent: oklch(99% 0 0); /* Accent — single, indigo */ --accent: oklch(64% 0.18 268); /* #6366f1 ~ indigo-500 */ --accent-hover: oklch(68% 0.18 268); --accent-soft: oklch(30% 0.10 268); /* фон чипа на тёмной */ --accent-bg: oklch(26% 0.08 268 / 0.4); --accent-text: oklch(80% 0.13 268); /* для текста на тёмном */ /* Semantic */ --success: oklch(70% 0.16 155); --success-soft: oklch(30% 0.09 155); --warning: oklch(80% 0.14 80); --warning-soft: oklch(34% 0.08 70); --danger: oklch(68% 0.20 25); --danger-soft: oklch(30% 0.10 25); /* Shadows (на тёмном — почти не видны, но всё-таки) */ --shadow-sm: 0 1px 0 oklch(0% 0 0 / 0.4); --shadow-md: 0 4px 12px -2px oklch(0% 0 0 / 0.4); --shadow-lg: 0 16px 48px -8px oklch(0% 0 0 / 0.6); color-scheme: dark; } /* ============================================================ LIGHT (optional) ============================================================ */ :root[data-theme="light"] { --bg-canvas: oklch(99% 0.002 250); /* paper-white */ --bg-surface: oklch(100% 0 0); /* pure white cards */ --bg-elevated: oklch(97% 0.004 250); /* hover */ --bg-sunken: oklch(96% 0.005 250); /* code, zebra */ --bg-tint: oklch(97% 0.010 268); /* лёгкий синий-tint */ --border-subtle: oklch(93% 0.005 250); --border-strong: oklch(85% 0.008 250); --text-primary: oklch(22% 0.012 250); --text-secondary: oklch(45% 0.010 250); --text-tertiary: oklch(60% 0.010 250); --text-on-accent: oklch(99% 0 0); --accent: oklch(54% 0.20 268); --accent-hover: oklch(48% 0.21 268); --accent-soft: oklch(90% 0.04 268); --accent-bg: oklch(96% 0.025 268); --accent-text: oklch(44% 0.20 268); --success: oklch(50% 0.14 155); --success-soft: oklch(95% 0.05 155); --warning: oklch(60% 0.15 75); --warning-soft: oklch(96% 0.05 80); --danger: oklch(54% 0.20 25); --danger-soft: oklch(95% 0.05 25); --shadow-sm: 0 1px 0 oklch(0% 0 0 / 0.04); --shadow-md: 0 4px 12px -2px oklch(40% 0.02 250 / 0.08); --shadow-lg: 0 16px 48px -8px oklch(40% 0.02 250 / 0.14); color-scheme: light; }