/* ============================================================ tokens.css — THE SINGLE SOURCE OF TRUTH Every colour, size, space, radius, and motion value lives here. Page CSS references var(--token). Never hardcode a hex or magic number in components.css or in index.html. ============================================================ */ :root { /* ---- Colour (semantic names, not "blue"/"grey") ---- */ --color-bg: #0d1117; --color-surface: #161b22; --color-surface-2: #1c2230; --color-text: #e6edf3; --color-text-muted: #9aa7b4; /* clears AA (4.5:1) on --color-bg */ --color-brand: #7c3aed; /* 4.6:1 with white — WCAG AA (use for bg) */ --color-brand-hover: #6d28d9; --color-link: var(--color-brand); /* default: links follow brand; override per theme */ --color-border: #2a3340; --color-success: #3fb950; --color-warn: #d29922; --color-danger: #f85149; /* ---- Typography ---- */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Modular type scale, 1.25 ratio — sizes relate to one another */ --text-xs: 0.8rem; --text-sm: 0.889rem; --text-base: 1rem; --text-lg: 1.25rem; --text-xl: 1.563rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem; --text-4xl: 3.052rem; --leading-tight: 1.2; --leading-normal: 1.6; --weight-normal: 400; --weight-medium: 500; --weight-bold: 700; /* ---- Spacing scale (4px base) ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-14: 3.5rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* ---- Radii / borders / shadows ---- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full: 9999px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 8px 24px rgba(0,0,0,0.45); /* ---- Layout constants ---- */ --max-width-content: 72rem; --max-width-prose: 42rem; /* ---- Motion ---- */ --transition-fast: 120ms ease; --transition-base: 200ms ease; /* ---- Elevation / stacking ---- */ --z-dropdown: 100; --z-overlay: 200; --z-modal: 210; --z-toast: 300; --color-overlay: rgba(0, 0, 0, 0.6); /* Control sizing — shared by buttons, inputs, etc. for aligned heights */ --control-height: 2.5rem; --control-height-sm: 2rem; --control-height-lg: 3rem; } /* Framework site uses explicit data-theme="dark" / "light" on . Client demo sites have NO data-theme attribute, so they only inherit :root defaults and override --color-brand etc. in their own theme.css. --color-link overrides here therefore only affect the framework site. */ :root[data-theme="dark"] { --color-link: #a78bfa; /* 8.1:1 on dark bg — brand purple is too dark as text */ } :root[data-theme="light"] { --color-bg: #ffffff; --color-surface: #f6f8fa; --color-surface-2: #eef1f5; --color-text: #1a1f24; --color-text-muted: #57606a; --color-border: #d8dee4; --shadow-md: 0 8px 24px rgba(0,0,0,0.10); --color-link: #7c3aed; /* 4.6:1 on white */ }