/* ============================================================= arkadiy-ds / tokens.css Design tokens for Arkadiy Schennikov's independent practice. One file, two themes (dark default, light via [data-theme="light"]). Copy this into a new project, link it in , done. ============================================================= */ /* ---------- DARK (default) — "warm coal" ---------- */ :root, :root[data-theme="dark"] { /* surface */ --bg: #141110; /* page background — warm coal, never pure black */ --bg-elev: #1a1715; /* subtly raised (cards, tooltips) */ --accent-soft:#2e201a; /* tinted surface behind callouts, inputs, etc. */ /* text */ --ink: #ede5d8; /* primary text — warm cream */ --ink-soft: #968c7a; /* muted text, eyebrows, meta, axis tick labels */ --ink-faint: #322a25; /* genuinely-ghost: watermarks, deprecated values, secondary axis with explicit de-emphasis. NOT for tick labels (v0.5 correction). */ /* structure */ --rule: #241f1b; /* 1px borders, dividers, hairlines */ /* signal */ --accent: #f5936a; /* coral-peach — THE signal color. Use sparingly. */ /* ---------- Data-surface value tokens ---------- Three semantic hues for reading values on dashboards (§7.1a). Strictly data-only — NEVER on editorial surfaces, NEVER as decoration, NEVER on text. Three conditions of applicability are enforced in DS. */ --val-pos: #8fa677; /* muted warm olive — "high = good" / positive delta */ --val-neu: #968c7a; /* = --ink-soft — neutral / unchanged / no-news */ --val-neg: #c2614a; /* desaturated coral-brick — "high = bad" / negative delta */ --val-warn: rgb(from var(--accent) r g b / 0.4); /* coral 40% — 4th flavour, advisory */ /* tinted companion surfaces for value tokens (callout backgrounds in data context) */ --val-pos-soft: #2a2e22; --val-neg-soft: #2e1d18; /* ---------- Legacy aliases (kept for v0.3 consumers) ---------- */ --positive: var(--val-pos); --positive-soft: var(--val-pos-soft); } /* ---------- LIGHT — "warm paper" ---------- */ :root[data-theme="light"] { --bg: #f4ecdd; /* warm paper — never pure white */ --bg-elev: #ede5d5; --accent-soft:#ecd9c3; --ink: #1a1613; /* near-black, warm */ --ink-soft: #6b5f4e; --ink-faint: #d8cbb4; /* genuinely-ghost only — see dark counterpart (v0.5). */ --rule: #e4d8bf; --accent: #c2451e; /* deeper coral — the light-theme twin. */ /* Data-surface value tokens — light variants (§7.1a). */ --val-pos: #5a7347; /* deeper olive — reads as signal on warm paper */ --val-neu: #6b5f4e; /* = --ink-soft */ --val-neg: #a83a18; /* deeper brick — paired with light coral, not orange */ --val-warn: rgb(from var(--accent) r g b / 0.4); --val-pos-soft: #d7dec8; --val-neg-soft: #ecd0c4; --positive: var(--val-pos); --positive-soft: var(--val-pos-soft); } /* ---------- Typography scale ---------- */ :root { /* Font stacks — Manrope display+body, IBM Plex Mono for technical UI only. The "*Fallback" entries are metric-matched synthetic fonts defined in typography.css — they hold layout steady during the swap window so the FOUT becomes a quiet weight/colour change, not a reflow. */ --font-display: "Manrope", "Manrope Fallback", system-ui, sans-serif; --font-body: "Manrope", "Manrope Fallback", system-ui, sans-serif; --font-mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace; /* Display settings used by .display / h1 / h2. */ --display-weight: 600; --display-tracking: -1.8px; /* letter-spacing in px — tight */ --display-leading: 1.03; /* Body + meta */ --body-size: 17px; --body-leading:1.6; --meta-size: 11px; --meta-tracking: 0.5px; /* meta/mono is UPPERCASE, tracked */ } /* ---------- Spacing — editorial (lead/essay/landing) ---------- */ :root { --gutter: 64px; /* horizontal page gutter for content at 1320px max */ --section-pad: 96px; /* vertical padding between major sections */ --stack-xs: 8px; --stack-sm: 14px; --stack-md: 24px; --stack-lg: 40px; --stack-xl: 64px; --max-width: 1320px; /* content canvas width */ /* Mobile parallel scale (v0.7). Same convention as --gutter-dense: a parallel set of tokens, not an override. Activated via media query below. The editorial scale stays canonical for desktop-and-print. */ --gutter-mobile: 20px; --section-pad-mobile: 56px; --max-width-mobile: 100%; /* Narrow-viewport breakpoint. NOT 768 — the topbar empirically loses the 1fr auto 1fr fit at ~640px (Russian uppercase tagline + Euler + nav + toggle in a single row). Single source of truth for any consumer that needs to mirror the breakpoint in JS or in its own CSS. */ --bp-narrow: 640px; } /* ---------- Spacing — dense (dashboards, admin, monitoring) ---------- Activate on a dense layout via OR on a specific container. Editorial rhythm is too generous for dashboards — dense is a parallel scale, not a scale override. */ :root { --gutter-dense: 24px; --section-pad-dense: 32px; --stack-dense-xs: 4px; --stack-dense-sm: 8px; --stack-dense-md: 14px; --stack-dense-lg: 24px; --max-width-dense: none; /* dashboards run full-viewport */ } /* ---------- Mobile reflow (v0.7) ---------- Below --bp-narrow, the editorial scale relaxes one notch: gutter collapses from 64 → 20, section-pad from 96 → 56, max-width drops the 1320px cap. Stack tokens shrink one step (xl: 64→48, lg: 40→32); smaller stacks (md/sm/xs) are unchanged because they already read correctly at narrow widths. This is NOT a switch to dense. Dashboards remain `` regardless of viewport, and dense tokens are independent of these. Editorial-on-mobile and dense-on-desktop are two different scales for two different jobs. */ @media (max-width: 640px) { :root { --gutter: var(--gutter-mobile); --section-pad: var(--section-pad-mobile); --max-width: var(--max-width-mobile); --stack-xl: 48px; /* was 64 */ --stack-lg: 32px; /* was 40 */ /* --stack-md, --stack-sm, --stack-xs unchanged */ } } /* ---------- Semantic state aliases ---------- Severity is NOT a new palette. It is a semantic re-use of existing tokens — OK = silence, CRIT = accent, WARN = accent at reduced intensity. See DESIGN-SYSTEM.md §7. */ :root { --state-ok: var(--ink-soft); /* muted — OK is the absence of signal */ --state-warn: var(--val-warn); /* half-signal (= coral 40%) */ --state-crit: var(--accent); /* full signal — single brand colour */ --state-positive: var(--val-pos); /* legacy alias — directional "high = good" */ --data-grid: var(--rule); /* chart gridlines */ --data-axis: var(--ink-soft); /* axis tick labels — must be readable on data-dense surface (v0.5 correction). NOT --ink-faint. */ --data-label: var(--ink-soft); /* chart titles, captions */ } /* ---------- Utility: smooth theme transitions ---------- */ html, body { background: var(--bg); color: var(--ink); transition: background 300ms ease, color 300ms ease; }