/* Design tokens — values from ca-site/TOKENS.md. Light is the default; dark applies via prefers-color-scheme AND can be overridden either way by a `data-theme` attribute the theme toggle sets on . */ :root { --ca-bg: #f6f8fb; --ca-surface: #ffffff; --ca-surface2: #f1f4f8; --ca-text: #17191c; --ca-muted: #667085; --ca-border: rgba(17, 24, 39, 0.1); --ca-primary: #3987e5; --ca-primary-strong: #1c5cab; --ca-danger: #d4553f; --ca-success: #557a3f; --ca-accent: #c96442; --ca-radius-sm: 7px; --ca-radius-md: 10px; --ca-radius-lg: 14px; --ca-radius-xl: 18px; --ca-max-content: 1240px; --ca-header-h: 62px; } @media (prefers-color-scheme: dark) { :root { --ca-bg: #0d0d0d; --ca-surface: #161615; --ca-surface2: #1f2023; --ca-text: #f5f4ef; --ca-muted: #9c9a8e; --ca-border: #2a2a28; --ca-primary-strong: #4c9bf0; --ca-success: #8fb474; } } :root[data-theme='dark'] { --ca-bg: #0d0d0d; --ca-surface: #161615; --ca-surface2: #1f2023; --ca-text: #f5f4ef; --ca-muted: #9c9a8e; --ca-border: #2a2a28; --ca-primary-strong: #4c9bf0; --ca-success: #8fb474; } :root[data-theme='light'] { --ca-bg: #f6f8fb; --ca-surface: #ffffff; --ca-surface2: #f1f4f8; --ca-text: #17191c; --ca-muted: #667085; --ca-border: rgba(17, 24, 39, 0.1); --ca-primary-strong: #1c5cab; --ca-success: #557a3f; } * { box-sizing: border-box; } html { color-scheme: light dark; } :root[data-theme='dark'] { color-scheme: dark; } :root[data-theme='light'] { color-scheme: light; } /* Russian words run longer on average than their English equivalents (e.g. "конфиденциальности" alone overflowed a 312px-wide mobile .prose column even with normal word-wrapping — a single word can still be wider than its container). Headings get overflow-wrap everywhere, not just where the bug was first caught, since any RU heading is at risk the same way. */ h1, h2, h3 { overflow-wrap: break-word; } body { margin: 0; min-height: 100dvh; background: var(--ca-bg); color: var(--ca-text); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; transition: background 0.2s, color 0.2s; } a { color: var(--ca-primary-strong); text-decoration: none; } a:hover { color: var(--ca-primary); } code, .mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; } :focus-visible { outline: 2px solid var(--ca-primary); outline-offset: 2px; border-radius: 4px; } summary { list-style: none; } summary::-webkit-details-marker { display: none; } @keyframes ca-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; } }