/* ============================================================================= * AdverseMonitor Design System v1.0 (2026-04-25) * * Single source of truth for colors, typography, spacing, and components. * Loaded on every page. Existing per-page inline styles are preserved for * page-specific layouts; this file defines the baseline. * * Supports three themes: light, dark, system (follows OS preference). * Override via `` attribute. * ========================================================================== */ /* ---------- Design Tokens: Dark (default) ---------- */ :root { /* Surfaces */ --dw-bg-base: #050508; --dw-bg-elevated: #0a0a0f; --dw-bg-surface: #111118; --dw-bg-surface-hi: #16161f; /* Text */ --dw-text-primary: #f8fafc; --dw-text-secondary: #cbd5e1; --dw-text-tertiary: #94a3b8; --dw-text-muted: #64748b; /* Borders */ --dw-border-subtle: rgba(255, 255, 255, 0.06); --dw-border-default: rgba(255, 255, 255, 0.12); --dw-border-hover: rgba(255, 255, 255, 0.20); /* Brand */ --dw-primary: #3b82f6; --dw-primary-light: #60a5fa; --dw-primary-dark: #2563eb; --dw-primary-glow: rgba(59, 130, 246, 0.15); /* Semantic */ --dw-success: #22c55e; --dw-warning: #f59e0b; --dw-danger: #ef4444; /* Typography */ --dw-font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif; --dw-font-body: 'Inter', system-ui, -apple-system, sans-serif; --dw-font-mono: 'JetBrains Mono', 'Consolas', 'Monaco', monospace; /* Font sizes (1.25 modular scale) */ --dw-text-xs: 0.75rem; /* 12px */ --dw-text-sm: 0.875rem; /* 14px */ --dw-text-base: 1rem; /* 16px */ --dw-text-lg: 1.125rem; /* 18px */ --dw-text-xl: 1.25rem; /* 20px */ --dw-text-2xl: 1.5rem; /* 24px */ --dw-text-3xl: 1.875rem; /* 30px */ --dw-text-4xl: 2.25rem; /* 36px */ --dw-text-5xl: 3rem; /* 48px */ /* Line heights */ --dw-leading-tight: 1.1; --dw-leading-snug: 1.3; --dw-leading-normal: 1.6; --dw-leading-relaxed: 1.8; /* Spacing (4px base) */ --dw-space-1: 0.25rem; /* 4px */ --dw-space-2: 0.5rem; /* 8px */ --dw-space-3: 0.75rem; /* 12px */ --dw-space-4: 1rem; /* 16px */ --dw-space-5: 1.25rem; /* 20px */ --dw-space-6: 1.5rem; /* 24px */ --dw-space-8: 2rem; /* 32px */ --dw-space-10: 2.5rem; /* 40px */ --dw-space-12: 3rem; /* 48px */ --dw-space-16: 4rem; /* 64px */ --dw-space-20: 5rem; /* 80px */ --dw-space-24: 6rem; /* 96px */ /* Radius */ --dw-radius-sm: 0.375rem; --dw-radius: 0.625rem; --dw-radius-lg: 1rem; --dw-radius-full: 9999px; /* Shadows (dark theme shadows are lighter) */ --dw-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --dw-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.4); --dw-shadow-lg: 0 10px 30px 0 rgba(0, 0, 0, 0.5); --dw-shadow-glow: 0 0 0 3px var(--dw-primary-glow); /* Transitions */ --dw-transition-fast: 150ms ease; --dw-transition: 250ms cubic-bezier(0.4, 0, 0.2, 1); --dw-transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1); /* Breakpoints (for reference in media queries) */ --dw-bp-sm: 640px; --dw-bp-md: 768px; --dw-bp-lg: 1024px; --dw-bp-xl: 1280px; /* Containers */ --dw-container-sm: 640px; --dw-container-md: 768px; --dw-container-lg: 1024px; --dw-container-xl: 1280px; } /* ---------- Light Theme Override ---------- */ [data-theme="light"] { --dw-bg-base: #ffffff; --dw-bg-elevated: #f8fafc; --dw-bg-surface: #f1f5f9; --dw-bg-surface-hi: #e2e8f0; --dw-text-primary: #0f172a; --dw-text-secondary: #334155; --dw-text-tertiary: #475569; --dw-text-muted: #64748b; --dw-border-subtle: rgba(0, 0, 0, 0.06); --dw-border-default: rgba(0, 0, 0, 0.12); --dw-border-hover: rgba(0, 0, 0, 0.20); --dw-primary-glow: rgba(59, 130, 246, 0.10); --dw-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --dw-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.08); --dw-shadow-lg: 0 10px 30px 0 rgba(0, 0, 0, 0.12); } /* ---------- System Preference (when no explicit data-theme set) ---------- */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not([data-theme="light"]) { --dw-bg-base: #ffffff; --dw-bg-elevated: #f8fafc; --dw-bg-surface: #f1f5f9; --dw-bg-surface-hi: #e2e8f0; --dw-text-primary: #0f172a; --dw-text-secondary: #334155; --dw-text-tertiary: #475569; --dw-text-muted: #64748b; --dw-border-subtle: rgba(0, 0, 0, 0.06); --dw-border-default: rgba(0, 0, 0, 0.12); --dw-border-hover: rgba(0, 0, 0, 0.20); --dw-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --dw-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.08); --dw-shadow-lg: 0 10px 30px 0 rgba(0, 0, 0, 0.12); } } /* ============================================================================= * Compatibility layer — older pages use `--bg-base`, `--brand-primary`, etc. * Map our tokens to their names so legacy page styles keep working. * ========================================================================== */ :root, [data-theme="light"], [data-theme="dark"] { --bg-base: var(--dw-bg-base); --bg-elevated: var(--dw-bg-elevated); --bg-surface: var(--dw-bg-surface); --bg-surface-hover: var(--dw-bg-surface-hi); --text-primary: var(--dw-text-primary); --text-secondary: var(--dw-text-secondary); --text-tertiary: var(--dw-text-tertiary); --text-muted: var(--dw-text-muted); --border-subtle: var(--dw-border-subtle); --border-default: var(--dw-border-default); --border-hover: var(--dw-border-hover); --brand-primary: var(--dw-primary); --brand-primary-light: var(--dw-primary-light); --brand-primary-dark: var(--dw-primary-dark); --brand-glow: var(--dw-primary-glow); --accent-danger: var(--dw-danger); --accent-warning: var(--dw-warning); --accent-success: var(--dw-success); --font-display: var(--dw-font-display); --font-body: var(--dw-font-body); --font-mono: var(--dw-font-mono); --accent-green: var(--dw-success); --accent-green-light: var(--dw-success); } /* ============================================================================= * Base resets + accessibility * ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--dw-bg-base); color: var(--dw-text-primary); font-family: var(--dw-font-body); line-height: var(--dw-leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--dw-transition), color var(--dw-transition); } /* Visible focus for keyboard users */ :focus-visible { outline: 2px solid var(--dw-primary); outline-offset: 2px; border-radius: var(--dw-radius-sm); } /* Hide focus ring when mouse is used */ :focus:not(:focus-visible) { outline: none; } /* Skip link */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--dw-primary); color: white; padding: var(--dw-space-3) var(--dw-space-4); border-radius: var(--dw-radius); font-weight: 600; z-index: 9999; } .skip-link:focus { left: var(--dw-space-4); top: var(--dw-space-4); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================================= * Theme Toggle Component * ========================================================================== */ .dw-theme-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--dw-bg-surface); border: 1px solid var(--dw-border-subtle); border-radius: var(--dw-radius-full); font-family: var(--dw-font-body); } .dw-theme-option { display: inline-flex; align-items: center; justify-content: center; gap: var(--dw-space-1); min-width: 32px; height: 28px; padding: 0 var(--dw-space-2); background: transparent; border: none; color: var(--dw-text-tertiary); font-size: var(--dw-text-xs); font-weight: 500; border-radius: var(--dw-radius-full); cursor: pointer; transition: all var(--dw-transition-fast); line-height: 1; } .dw-theme-option:hover { color: var(--dw-text-secondary); background: var(--dw-bg-surface-hi); } .dw-theme-option.is-active { background: var(--dw-primary); color: #ffffff; } .dw-theme-option svg { width: 14px; height: 14px; flex-shrink: 0; } /* Visually-hidden text for screen readers */ .dw-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================================= * Accessibility fixes for pre-existing pages * Contrast adjustments that must work in light and dark mode. * ========================================================================== */ /* Ensure minimum touch-target size on interactive elements */ a, button { min-height: 24px; /* small text links are fine; larger controls handled via btn classes */ } /* Boost contrast on muted text when in light mode (previous light-mode blog * posts used #64748b on #ffffff = 4.1:1, failing WCAG AA body text). * Our new tokens map --text-muted to a compliant shade (#64748b in light mode * is still borderline; boost specificity). */ [data-theme="light"] { --dw-text-muted: #475569; /* was #64748b; now 7.1:1 on white */ } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not([data-theme="light"]) { --dw-text-muted: #475569; } } /* Ensure inline content within .article-content inherits proper colors */ .article-content strong, .article-content b { color: var(--dw-text-primary); } /* Image alt text visible as fallback when image fails */ img { max-width: 100%; height: auto; font-style: italic; color: var(--dw-text-tertiary); font-size: var(--dw-text-sm); } /* ============================================================================= * Print styles * ========================================================================== */ @media print { body { background: white; color: black; } .nav-glass, .dw-theme-toggle, footer, nav { display: none !important; } .article-content { max-width: 100%; } a[href]:not([href^="#"])::after { content: " (" attr(href) ")"; font-size: 0.85em; } }