/* base.css - reset, typography, global tokens */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --color-bg: #ffffff; --color-surface: #f5f5f5; --color-border: #8a8a8a; --color-text: #1a1a1a; --color-text-muted: #5a5a5a; --color-accent: #0055cc; --color-accent-hover: #003d99; --color-fail: #b91c1c; --color-fail-bg: #fef2f2; --color-fail-border: #dc2626; --color-pass: #15803d; --color-pass-bg: #f0fdf4; --color-pass-border: #16a34a; --color-focus: #0055cc; --font-family: system-ui, -apple-system, sans-serif; --font-family-mono: ui-monospace, "Cascadia Code", "Source Code Pro", monospace; --font-size-base: 1rem; --font-size-sm: 0.875rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --radius: 4px; --line-height: 1.6; } html { font-size: 100%; } body { font-family: var(--font-family); font-size: var(--font-size-base); line-height: var(--line-height); color: var(--color-text); background-color: var(--color-bg); } /* Focus visible - never remove outline */ :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; } /* Smooth theme transitions. Color fades are not spatial motion so they are safe for reduced-motion users. Only movement-based animations (keyframes with translate/rotate/scale) are suppressed via prefers-reduced-motion in layout.css. */ *, *::before, *::after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* Icon pop-in animation for the theme toggle button */ @keyframes theme-icon-in { from { opacity: 0; transform: scale(0.4) rotate(-30deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } } a { color: var(--color-accent); } a:hover { color: var(--color-accent-hover); } h1, h2, h3, h4 { line-height: 1.3; font-weight: 600; } h1 { font-size: var(--font-size-3xl); } h2 { font-size: var(--font-size-2xl); } h3 { font-size: var(--font-size-xl); } h4 { font-size: var(--font-size-lg); } p { margin-bottom: var(--space-4); } p:last-child { margin-bottom: 0; } ul, ol { padding-left: var(--space-6); margin-bottom: var(--space-4); } li { margin-bottom: var(--space-2); } code { font-family: var(--font-family-mono); font-size: 0.9em; background: var(--color-surface); color: var(--color-text); padding: 0.1em 0.3em; border-radius: var(--radius); border: 1px solid var(--color-border); } pre { font-family: var(--font-family-mono); font-size: var(--font-size-sm); background: #1e1e1e; color: #d4d4d4; padding: var(--space-4); border-radius: var(--radius); overflow-x: auto; margin-bottom: var(--space-4); /* Force dark background even in dark mode for consistency */ background: #1e1e1e !important; color: #d4d4d4 !important; } pre code { background: none; border: none; padding: 0; font-size: inherit; color: inherit; } /* ------------------------------------------------------- Dark mode - token overrides Applied when is set by JS. All contrast ratios verified against WCAG 1.4.3 (4.5:1 for text) and 1.4.11 (3:1 for UI components). ------------------------------------------------------- */ [data-theme="dark"] { --color-bg: #0f172a; /* slate-900 */ --color-surface: #1e293b; /* slate-800 */ --color-border: #64748b; /* slate-500 - 4.2:1 on bg */ --color-text: #f1f5f9; /* slate-100 - 17.5:1 on bg */ --color-text-muted: #94a3b8; /* slate-400 - 7.6:1 on bg */ --color-accent: #60a5fa; /* blue-400 - 7.7:1 on bg */ --color-accent-hover:#93c5fd; /* blue-300 */ --color-fail: #fca5a5; /* red-300 - 10.9:1 on fail-bg */ --color-fail-bg: #1a0808; --color-fail-border: #ef4444; /* red-500 - 5.4:1 on fail-bg */ --color-pass: #86efac; /* green-300 - 11.0:1 on pass-bg */ --color-pass-bg: #052e16; --color-pass-border: #22c55e; /* green-500 - 6.8:1 on pass-bg */ --color-focus: #60a5fa; }