/* ============================================================ tokens.css — THE ONLY FILE FORM ITERATION SHOULD TOUCH This file holds every color, font, size, and spacing value. Restyle the whole site by changing values here. DO NOT add layout rules here — those live in app.css. DO NOT change variable NAMES — the rest of the site reads them. ============================================================ */ :root { /* ---- surface ---- */ --bg: #0e1116; --bg-raised: #161b22; --bg-sunken: #0a0d12; --border: #262d38; --border-strong: #3a4553; /* ---- text ---- */ --text: #e6edf3; --text-muted: #8b98a9; --text-faint: #5c6773; /* ---- accent ---- */ --accent: #4c9df0; --accent-soft: rgba(76, 157, 240, 0.14); --accent-text: #ffffff; /* ---- status ---- */ --ok: #3fb950; --ok-soft: rgba(63, 185, 80, 0.14); --warn: #d29922; --warn-soft: rgba(210, 153, 34, 0.14); --danger: #f85149; --danger-soft: rgba(248, 81, 73, 0.14); /* ---- type ---- */ --font: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace; --fs-xs: 0.75rem; --fs-sm: 0.85rem; --fs-base: 0.95rem; --fs-lg: 1.15rem; --fs-xl: 1.5rem; --fs-2xl: 2rem; --fs-3xl: 2.75rem; --fw-normal: 400; --fw-med: 550; --fw-bold: 700; --lh-tight: 1.2; --lh-base: 1.55; /* ---- space ---- */ --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; /* ---- shape ---- */ --radius: 10px; --radius-sm: 6px; --radius-lg: 16px; --shadow: 0 1px 3px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.25); /* ---- layout ---- */ --max-width: 1100px; --gutter: 1rem; } /* Light theme. Toggle by setting data-theme="light" on . */ :root[data-theme="light"] { --bg: #ffffff; --bg-raised: #f6f8fa; --bg-sunken: #eceff2; --border: #d6dce2; --border-strong: #b6c0cb; --text: #14181d; --text-muted: #5a6672; --text-faint: #8b98a9; --accent: #0a63c9; --accent-soft: rgba(10, 99, 201, 0.10); --ok: #1a7f37; --ok-soft: rgba(26, 127, 55, 0.10); --warn: #9a6700; --warn-soft: rgba(154, 103, 0, 0.10); --danger: #cf222e; --danger-soft: rgba(207, 34, 46, 0.10); --shadow: 0 1px 2px rgba(0,0,0,.08), 0 6px 18px rgba(0,0,0,.06); }