/* ============================================================ Editools — Design tokens (Playhead system) Single source of truth for color, type, radius and shadow. Light is the default; dark applies via . Brand = charcoal + steel + a single red playhead accent. ============================================================ */ :root { /* surfaces */ --paper: #f4f4f1; --bg-accent: #ffffff; /* top radial highlight on body */ --surface: #ffffff; --surface-2: #fafafa; /* ink + neutral gray scale (replaces ~40 ad-hoc grays) */ --ink: #16191c; --ink-soft: #3a3f45; --g-1: #6b7178; /* standard muted text */ --g-2: #9aa0a6; /* secondary / labels */ --g-3: #c2c7cb; /* hints / faint */ /* hairlines */ --line: rgba(22, 25, 28, 0.10); --line-2: rgba(22, 25, 28, 0.18); /* brand accent — the red playhead */ --accent: #ff4a3f; --accent-ink: #ffffff; /* solid contrasting surface (dark buttons, toasts, keys) — stays dark in both modes */ --solid: #16191c; --solid-ink: #ffffff; /* semantic status (separate from brand) */ --success: #0f8c5a; --success-soft: rgba(16, 140, 90, 0.12); --danger: #c0392b; --danger-soft: rgba(255, 74, 63, 0.10); /* depth */ --shadow: 0 14px 40px rgba(22, 25, 28, 0.07); /* radius scale */ --r-sm: 9px; --r-md: 14px; --r-lg: 22px; /* type scale */ --text-micro: 11px; --text-small: 13px; --text-body: 14px; --text-input: 15px; --text-emphasis: 17px; /* ---- legacy aliases: keep existing var() references working ---- */ --card: var(--surface); --muted: var(--g-1); --red: var(--accent); --green: var(--success); --green-deep: var(--success); --lime: var(--success); color: var(--ink); background: var(--paper); font-family: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif; font-synthesis: none; } :root[data-theme="dark"] { --paper: #101316; --bg-accent: #1b2026; --surface: #181c21; --surface-2: #1f242a; --ink: #eef0f2; --ink-soft: #c4c9ce; --g-1: #9aa1a8; --g-2: #757d84; --g-3: #454c53; --line: rgba(255, 255, 255, 0.09); --line-2: rgba(255, 255, 255, 0.16); --accent: #ff5a4f; --accent-ink: #ffffff; --solid: #262b31; /* lifted charcoal so buttons read on the dark page */ --solid-ink: #ffffff; --success: #4fd49a; --success-soft: rgba(79, 212, 154, 0.15); --danger: #ff7a70; --danger-soft: rgba(255, 90, 79, 0.16); --shadow: 0 14px 40px rgba(0, 0, 0, 0.42); } /* respect a reduced-motion preference for the theme transition */ @media (prefers-reduced-motion: no-preference) { body { transition: background-color .25s ease, color .25s ease; } }