/* * McClatchy Design System — CSS Custom Properties * * Usage: * 1. Import this file in your app's global CSS * 2. Add class="dark" to for dark mode * 3. Reference tokens as var(--ds-background), var(--ds-accent), etc. * * For Tailwind projects, use the tailwind-preset instead — it wires * these variables automatically via semantic color names. * * For vanilla HTML/CSS projects (e.g., Cloudflare Worker dashboards), * import this file directly. */ /* ========================================================================== LIGHT MODE (default) ========================================================================== */ :root { /* Backgrounds */ --ds-background: #ffffff; --ds-surface: #ffffff; --ds-surface-raised: #f9fafb; --ds-surface-overlay: #f3f4f6; /* Text */ --ds-foreground: #111827; --ds-foreground-muted: #4b5563; --ds-foreground-faint: #9ca3af; /* Borders */ --ds-border: #e5e7eb; --ds-border-strong: #d1d5db; /* Accent — Primary action color */ --ds-accent: #2563eb; --ds-accent-hover: #1d4ed8; --ds-accent-foreground: #ffffff; /* Accent — Secondary */ --ds-accent-secondary: #6366f1; --ds-accent-secondary-hover: #4f46e5; /* Typography */ --ds-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --ds-font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, monospace; } /* ========================================================================== DARK MODE ========================================================================== */ .dark { /* Backgrounds — navy scale from insights-agent */ --ds-background: #0f0f1a; --ds-surface: #1e1e32; --ds-surface-raised: #252540; --ds-surface-overlay: #2d2d44; /* Text — slate/gray scale */ --ds-foreground: #f8fafc; --ds-foreground-muted: #94a3b8; --ds-foreground-faint: #64748b; /* Borders */ --ds-border: #2d2d44; --ds-border-strong: #475569; /* Accent — blue for consistency across modes */ --ds-accent: #3b82f6; --ds-accent-hover: #2563eb; --ds-accent-foreground: #ffffff; /* Accent — Secondary */ --ds-accent-secondary: #6366f1; --ds-accent-secondary-hover: #4f46e5; } /* ========================================================================== SCORE COLORS (same in both modes — always on dark backgrounds) ========================================================================== */ :root { /* High score (green) */ --ds-score-high-bg: #166534; --ds-score-high-fg: #86efac; --ds-score-high: #10b981; /* Medium score (yellow) */ --ds-score-medium-bg: #854d0e; --ds-score-medium-fg: #fde047; --ds-score-medium: #f59e0b; /* Low score (red) */ --ds-score-low-bg: #991b1b; --ds-score-low-fg: #fca5a5; --ds-score-low: #ef4444; } /* ========================================================================== STATUS BADGES (same in both modes) ========================================================================== */ :root { --ds-status-new-bg: #fef3c7; --ds-status-new-fg: #92400e; --ds-status-reviewing-bg: #dbeafe; --ds-status-reviewing-fg: #1e40af; --ds-status-approved-bg: #d1fae5; --ds-status-approved-fg: #065f46; --ds-status-declined-bg: #fee2e2; --ds-status-declined-fg: #991b1b; } /* ========================================================================== GRADIENTS ========================================================================== */ :root { --ds-gradient-brand: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); --ds-gradient-action: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); } /* ========================================================================== TRANSPARENT TINTS (accent + 12.5% alpha, for tinted backgrounds) ========================================================================== */ :root { --ds-tint-indigo: #6366f120; --ds-tint-violet: #8b5cf620; --ds-tint-blue: #3b82f620; --ds-tint-emerald: #10b98120; --ds-tint-amber: #f59e0b20; --ds-tint-red: #ef444420; } /* ========================================================================== SCROLLBAR (dark mode only — light mode uses browser defaults) ========================================================================== */ .dark ::-webkit-scrollbar { width: 8px; height: 8px; } .dark ::-webkit-scrollbar-track { background: var(--ds-background); } .dark ::-webkit-scrollbar-thumb { background: var(--ds-surface-overlay); border-radius: 4px; } .dark ::-webkit-scrollbar-thumb:hover { background: #475569; } /* ========================================================================== 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; } }