/* ========================================================================== LambdaPi — design tokens -------------------------------------------------------------------------- The single source of truth for colour, shape, elevation, type and rhythm. Loaded FIRST in index.html, before every other stylesheet. This file replaces four competing :root blocks that used to live in styles.css (x2) and platform-shell.css (x2). They redefined the same names with different values, so which one won depended on load order rather than intent — --radius-xl meant 32px in one and 8px in another. Rules this system enforces: - No gradients in the interface. No backdrop-filter. No glow shadows (box-shadow: 0 0 Npx ). No text-shadow for decoration. No transform: scale() on hover. - Shadow means elevation, nothing else. Only genuinely raised surfaces get one: modal, sticky bar, dropdown, open sidebar. Flat cards are held by a 1px border. - One radius for rectangular surfaces. Pills only for badges and toggles. 50% only for round avatars and markers. - The diagram palette (--dia-*) is for mathematical figures only and is never used in the interface. Section 8 keeps the legacy names alive as aliases so no existing rule breaks. They are being retired file by file; do not add new uses. ========================================================================== */ :root { /* ── 1. UI palette — 14 tokens ───────────────────────────────────── Cold academic: one cool neutral canvas, dark navy ink, one accent blue. Warmth comes from typography, not from beige backgrounds. Every text token clears WCAG AA (4.5:1) against all four backing surfaces — --surface, --canvas, --surface-sunken and --accent-wash. The figure in each comment is the worst of those four. */ --canvas: #f4f6f8; /* application background */ --surface: #ffffff; /* cards, panels */ --surface-sunken: #eef1f5; /* nested areas, inputs at rest, stripes */ --ink: #14243a; /* primary text, sidebar 13.4:1 */ --ink-soft: #2b4057; /* subheadings 9.1:1 */ --muted: #5a6b7d; /* secondary text 4.7:1 */ --line: #d6dce3; /* 1px borders */ --line-strong: #b9c4d1; /* borders on emphasised states */ /* WCAG 1.4.11 wants 3:1 for anything you need in order to recognise a control and its state — the edge of a text field, a checkbox, a radio. Measured on all four backing surfaces: 3.53 on --surface, 3.12 on --surface-sunken, 3.26 on --canvas, 3.03 on --accent-wash. --line (1.38) and --line-strong (1.77) are nowhere near it. Controls only. Card edges and dividers stay on --line: they are not information you need to operate anything, and darkening every one of them to 3:1 would make the whole application heavy for no accessibility gain. */ --line-control: #7b8a9a; --accent: #315f9f; /* the only accent 5.5:1 */ --accent-hover: #27508a; /* hover and pressed 6.9:1 */ --accent-wash: #e8eef6; /* selection backing */ --success: #127043; /* 5.3:1 — the plan's #14804c falls to */ /* 4.26:1 on --accent-wash */ --warning: #8a6410; /* 4.6:1 */ --danger: #b03a28; /* 5.2:1 */ /* ── 2. Shape ────────────────────────────────────────────────────── One radius for rectangular surfaces. --radius-xl / -lg / -md are gone: all three had collapsed to 8px, so the names carried no information. */ --radius: 8px; /* every rectangular surface */ --radius-sm: 6px; /* controls inside a card */ --radius-pill: 999px; /* badges and toggles only */ /* There was a --radius-shell: 10px here, for "app shell chrome". The shell had 10px and 11px because it was written as a separate layer, not because chrome wants a different corner from content — the footer brand mark was already at --radius while the identical sidebar brand mark was at 10px. One radius means one radius. */ /* One weight for the accent rule that marks an editorial surface. The library had grown six of them — 2, 3, 4, 5 and 7px, in both --ink and --accent — which is five more than the distinction can carry. */ --rule: 3px; /* ── 3. Elevation ────────────────────────────────────────────────── Two values. Anything flat uses a border instead. */ --shadow-raised: 0 12px 32px rgba(20, 36, 58, 0.08); --shadow-overlay: 0 24px 60px rgba(20, 36, 58, 0.18); /* ── 4. Typography ──────────────────────────────────────────────── Display serif for primary page and hero titles only. Onest carries everything else. */ --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-text: 'Onest', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace; /* Type ladder — 11 steps. Nothing below --fs-caption (12.8px). */ --fs-eyebrow: 0.75rem; /* 12px uppercase kickers and labels */ --fs-caption: 0.8rem; /* 12.8px meta, badges, fine print */ --fs-sm: 0.875rem; /* 14px secondary text, buttons, tables */ --fs-base: 1rem; /* 16px body copy */ --fs-md: 1.125rem; /* 18px lead paragraphs */ --fs-lg: 1.375rem; /* 22px card titles (h3) */ --fs-xl: 1.75rem; /* 28px stat values, sub-section titles */ --fs-2xl: 2.25rem; /* 36px large numerics */ --fs-display-sm: clamp(2.1rem, 3.4vw, 2.85rem); /* profile, auth */ --fs-display: clamp(2.65rem, 4.6vw, 4rem); /* section, admin */ --fs-display-lg: clamp(3rem, 5.1vw, 5rem); /* home, subscribe */ --lh-display: 1; --lh-tight: 1.2; --lh-snug: 1.35; --lh-base: 1.6; --lh-relaxed: 1.7; --ls-display: -0.025em; --ls-label: 0.06em; /* ── 5. Rhythm ──────────────────────────────────────────────────── One spacing scale. Every padding, margin and gap comes from here. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* One step past the plan's scale, for the breaks between top-level sections on the home page — not for padding inside anything. It exists because two such breaks were sitting at 120px and 126px, off any scale and a hair apart; one named step is what the difference was worth. */ --space-section: 96px; /* ── 6. Layout ────────────────────────────────────────────────────── */ --sidebar-width: 268px; --transition: 350ms cubic-bezier(0.4, 0, 0.2, 1); /* ── 7. Diagram palette ─────────────────────────────────────────── For mathematical figures only — triangles, graphs, solids of revolution. Colour coding earns its place there; it never appears in the interface. All eight clear 4.5:1 against both --surface and --canvas, so they work for figure labels as well as strokes. Inside a figure, --accent marks the "current" element and nothing else. */ --dia-1: #1f4e79; /* blue 7.9:1 on canvas */ --dia-2: #a35c07; /* ochre 4.7:1 */ --dia-3: #15703a; /* green 5.6:1 */ --dia-4: #b0271f; /* red 6.1:1 */ --dia-5: #5b3ba8; /* violet 7.3:1 */ --dia-6: #0f6b75; /* teal 5.7:1 */ --dia-7: #6b6410; /* olive 5.6:1 */ --dia-8: #98215a; /* magenta 7.1:1 */ /* Figure text sits inside an SVG viewBox, so these are user units, not CSS pixels: the same value renders at a different size in a 180-wide figure and a 720-wide one. That is why figure text cannot join the UI ladder — it gets its own four steps instead of the nine ad-hoc values it had. */ --fig-fs-sm: 11px; /* dense measure labels, panel titles */ --fig-fs: 13px; /* notes, ratios, secondary labels */ --fig-fs-md: 15px; /* primary point and axis labels */ --fig-fs-lg: 20px; /* legend headline, standalone symbol */ --dia-1-wash: #e7edf4; --dia-2-wash: #f6eee3; --dia-3-wash: #e6f0ea; --dia-4-wash: #f7e9e8; --dia-5-wash: #eeeaf7; --dia-6-wash: #e5eff1; --dia-7-wash: #f0efe2; --dia-8-wash: #f6e8ee; /* ── 8. Legacy aliases ──────────────────────────────────────────── Every name the old four :root blocks defined, pointing at the token that replaced it. Existing rules keep working unchanged; these disappear as each file is migrated. Do not add new uses. */ /* was styles.css:4 and styles.css:3210 */ --bg-deep: var(--canvas); --primary: var(--accent); --cyan: var(--accent); --gold: var(--warning); --emerald: var(--success); --rose: var(--danger); --text-primary: var(--ink); --text-secondary: var(--muted); --text-muted: var(--muted); --shadow: var(--shadow-raised); --font-heading: var(--font-display); --font-body: var(--font-text); /* was platform-shell.css:1 and platform-shell.css:999 */ --platform-sidebar-width: var(--sidebar-width); --platform-ink: var(--ink); --platform-teal: var(--accent); --platform-teal-bright: var(--accent); --platform-premium: var(--warning); --platform-canvas: var(--canvas); --platform-surface: var(--surface); --platform-border: var(--line); --platform-text: var(--ink); --platform-muted: var(--muted); --platform-shadow: var(--shadow-raised); /* Home · lesson library. Was a warm "paper" theme scoped to .lesson-library in platform-shell.css: #f7f4ed paper, #b9563f terracotta, #d8dde1 rules. Repointed at the cold system — the library now reads as the same product as every other page. --library-red was the library's second, editorial accent: it set the eyebrows above worked examples, notations and callouts. Keeping it red made ~470 labels read as errors, so it collapses into the one accent — which is also what puts the library's eyebrows in the same blue as "ЛИЧНЫЕ ДАННЫЕ" on the profile and "ДИНАМИКА ПРОГРЕССА" on the charts. */ --library-ink: var(--ink); --library-blue: var(--accent); --library-red: var(--accent); --library-paper: var(--surface); --library-line: var(--line); } /* The sidebar narrows on tablets and collapses off-canvas on phones. These are the only responsive token overrides in the system. */ @media (max-width: 1120px) and (min-width: 901px) { :root { --sidebar-width: 250px; } } @media (max-width: 900px) { :root { --sidebar-width: 0px; } }