/* * themes.css — ClearFigures * ───────────────────────────────────────────────────────────── * All theme definitions live here as CSS custom property blocks. * Components in style.css ONLY reference var(--c-*) tokens — * never hardcoded hex values. * * To switch theme: set data-theme="[name]" on . * To add a theme: copy any block below, change the name, update values. * * Available themes: * professional — clean, GOV.UK-adjacent, high trust (DEFAULT) * fintech — dark, modern, high-contrast * warm — off-white, serif, approachable * mono — stark black & white, monospaced * ───────────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════ 1. PROFESSIONAL (default — shipped theme) Clean, trustworthy, GOV.UK-adjacent. ═══════════════════════════════════════════ */ :root, [data-theme="professional"] { /* Backgrounds */ --c-bg: #ffffff; --c-bg-sub: #f9fafb; --c-bg-hover: #f3f4f6; /* Borders */ --c-border: #e5e7eb; --c-border-strong: #d1d5db; /* Text */ --c-text: #111827; --c-text-muted: #6b7280; --c-text-hint: #9ca3af; /* Brand / interactive */ --c-primary: #1d4ed8; --c-primary-dark: #1e40af; --c-primary-light: #eff6ff; --c-primary-text: #ffffff; /* text ON primary bg */ /* Semantic */ --c-success: #15803d; --c-success-bg: #f0fdf4; --c-danger: #dc2626; --c-danger-bg: #fef2f2; /* Warning / caution (disclaimer, banners) */ --c-warning-bg: #fffbeb; --c-warning-border: #d97706; --c-warning-text: #92400e; --c-caution-bg: #fefce8; --c-caution-border: #ca8a04; --c-caution-text: #854d0e; /* Prior-year info banner */ --c-info-bg: #fefce8; --c-info-border: #fde047; --c-info-text: #854d0e; /* Result panel highlight (the "answer" row) */ --c-result-highlight: #1d4ed8; /* Typography */ --f-base: 'Inter', system-ui, -apple-system, sans-serif; --f-logo: 'Inter', system-ui, -apple-system, sans-serif; --f-mono: 'SFMono-Regular', Consolas, monospace; --logo-weight: 700; /* Shape */ --radius-input: 6px; --radius-card: 10px; --radius-btn: 6px; --radius-pill: 20px; /* Sizing */ --input-height: 44px; --btn-padding: 8px 20px; --focus-ring: 0 0 0 3px rgba(29, 78, 216, 0.15); } /* ═══════════════════════════════════════════ 2. FINTECH DARK Deep navy, sky-blue accent. Modern. ═══════════════════════════════════════════ */ [data-theme="fintech"] { --c-bg: #0f172a; --c-bg-sub: #1e293b; --c-bg-hover: #263248; --c-border: #334155; --c-border-strong: #475569; --c-text: #f1f5f9; --c-text-muted: #94a3b8; --c-text-hint: #64748b; --c-primary: #38bdf8; --c-primary-dark: #0ea5e9; --c-primary-light: #0c4a6e; --c-primary-text: #0c1a2e; --c-success: #4ade80; --c-success-bg: #052e16; --c-danger: #f87171; --c-danger-bg: #450a0a; --c-warning-bg: #1c1917; --c-warning-border: #f59e0b; --c-warning-text: #fcd34d; --c-caution-bg: #1c1917; --c-caution-border: #f59e0b; --c-caution-text: #fcd34d; --c-info-bg: #172033; --c-info-border: #38bdf8; --c-info-text: #7dd3fc; --c-result-highlight: #38bdf8; --f-base: 'Inter', system-ui, -apple-system, sans-serif; --f-logo: 'Inter', system-ui, -apple-system, sans-serif; --f-mono: 'SFMono-Regular', Consolas, monospace; --logo-weight: 700; --radius-input: 4px; --radius-card: 8px; --radius-btn: 4px; --radius-pill: 4px; --input-height: 44px; --btn-padding: 8px 20px; --focus-ring: 0 0 0 3px rgba(56, 189, 248, 0.2); } /* ═══════════════════════════════════════════ 3. WARM Off-white, amber accent, serif typography. Approachable — good for sole trader audience. ═══════════════════════════════════════════ */ [data-theme="warm"] { --c-bg: #fffdf7; --c-bg-sub: #fef9ee; --c-bg-hover: #fef3d8; --c-border: #e8dfc8; --c-border-strong: #d4c4a0; --c-text: #2d2416; --c-text-muted: #7c6a50; --c-text-hint: #a8947a; --c-primary: #b45309; --c-primary-dark: #92400e; --c-primary-light: #fff7ed; --c-primary-text: #ffffff; --c-success: #16a34a; --c-success-bg: #f0fdf4; --c-danger: #dc2626; --c-danger-bg: #fef2f2; --c-warning-bg: #fef3c7; --c-warning-border: #d97706; --c-warning-text: #92400e; --c-caution-bg: #fef9c3; --c-caution-border: #ca8a04; --c-caution-text: #854d0e; --c-info-bg: #fef9c3; --c-info-border: #fde047; --c-info-text: #854d0e; --c-result-highlight: #b45309; --f-base: Georgia, 'Times New Roman', serif; --f-logo: Georgia, 'Times New Roman', serif; --f-mono: 'SFMono-Regular', Consolas, monospace; --logo-weight: 700; --radius-input: 8px; --radius-card: 14px; --radius-btn: 8px; --radius-pill: 20px; --input-height: 46px; --btn-padding: 9px 22px; --focus-ring: 0 0 0 3px rgba(180, 83, 9, 0.15); } /* ═══════════════════════════════════════════ 4. MONO Stark, typographic, zero-decoration. Sharp contrast — great differentiator. ═══════════════════════════════════════════ */ [data-theme="mono"] { --c-bg: #ffffff; --c-bg-sub: #f5f5f5; --c-bg-hover: #ebebeb; --c-border: #d4d4d4; --c-border-strong: #a3a3a3; --c-text: #171717; --c-text-muted: #737373; --c-text-hint: #a3a3a3; --c-primary: #171717; --c-primary-dark: #000000; --c-primary-light: #f5f5f5; --c-primary-text: #ffffff; --c-success: #166534; --c-success-bg: #f0fdf4; --c-danger: #991b1b; --c-danger-bg: #fef2f2; --c-warning-bg: #fafafa; --c-warning-border: #737373; --c-warning-text: #404040; --c-caution-bg: #fafafa; --c-caution-border: #a3a3a3; --c-caution-text: #525252; --c-info-bg: #fafafa; --c-info-border: #a3a3a3; --c-info-text: #525252; --c-result-highlight: #171717; --f-base: 'Courier New', Courier, monospace; --f-logo: 'Courier New', Courier, monospace; --f-mono: 'Courier New', Courier, monospace; --logo-weight: 700; --radius-input: 0px; --radius-card: 0px; --radius-btn: 0px; --radius-pill: 0px; --input-height: 44px; --btn-padding: 8px 20px; --focus-ring: 0 0 0 2px rgba(23, 23, 23, 0.3); } /* ═══════════════════════════════════════════ HOW TO ADD A NEW THEME ═══════════════════════════════════════════ 1. Copy any block above 2. Change [data-theme="name"] to your new name 3. Update the variable values 4. Add a button in the theme switcher UI (theme.js) 5. Done — all components inherit automatically Example — client brand theme: ───────────────────────────── [data-theme="acme"] { --c-bg: #ffffff; --c-primary: #e63946; (Acme brand red) --c-primary-dark: #c1121f; --c-primary-light: #fff0f0; --c-primary-text: #ffffff; ... (copy remaining tokens from professional) } */