/* public/css/theme.css * * Shared light/dark theme tokens for the portal (client + admin * dashboards, settings, webhooks, leads, notifications, clients, login * pages). NOT loaded by form.html or the embed widget - those use * OS-preference only, no toggle, no localStorage (see Phase 2). * * Selection mechanism: a `data-theme="light"|"dark"` attribute on * , set by a small synchronous inline script in each page's * (before this stylesheet's link tag) - see THEME_INIT_SNIPPET * in theme-toggle.js for the exact script every page embeds. That * script resolves localStorage -> prefers-color-scheme -> "light", so * by the time this stylesheet's selectors are evaluated at first paint, * data-theme is already correct. No @media(prefers-color-scheme) block * is needed here - the JS already resolved that into the attribute. * * Values are NOT literal inversions of the light values - each dark * pairing was chosen and verified against real WCAG 2.1 contrast ratios * (computed, not eyeballed) for the surface it's actually used against. * See the implementation report for the full ratio table. Two * pre-existing light-mode gaps are called out below where relevant * (--color-text-muted and --color-text-faint on white already fall * short of 4.5:1 today, before this change) - carried forward * unchanged in light mode since fixing them wasn't asked for, but NOT * repeated in dark mode, where the equivalent tokens were chosen to * actually pass. */ :root { /* Tells the browser to render native form controls, scrollbars, and focus rings for light mode - small, purely-additive, standards- based improvement (no risk of visual regression, since it only affects native chrome nothing else here styles). */ color-scheme: light; /* Surfaces */ --color-bg-page: #f7fafc; --color-bg-card: #ffffff; --color-border: #e2e8f0; --color-border-strong: #cbd5e0; --color-shadow: rgba(0, 0, 0, 0.06); --color-shadow-strong: rgba(0, 0, 0, 0.1); /* Text */ --color-text-heading: #1a202c; --color-text-body: #2d3748; --color-text-secondary: #4a5568; /* Pre-existing gap: 4.02:1 on white, just under the 4.5:1 AA text threshold. Unchanged here (out of scope for this task); the dark equivalent below does not repeat this. */ --color-text-muted: #718096; /* Pre-existing gap: 2.26:1 on white, well under AA. Unchanged here for the same reason; the dark equivalent below actually passes. */ --color-text-faint: #a0aec0; /* Brand */ --color-brand: #667eea; --color-brand-dark: #764ba2; --color-brand-hover: #5a67d8; --color-brand-text: #667eea; --color-on-brand: #ffffff; /* Status: success */ --color-success-bg: #c6f6d5; --color-success-text: #22543d; --color-success-icon: #48bb78; /* Status: danger */ --color-danger-bg: #fed7d7; --color-danger-text: #742a2a; --color-danger-icon: #f56565; /* Status: warning */ --color-warning-bg: #feebc8; --color-warning-text: #7b341e; --color-warning-icon: #ed8936; /* Status: info */ --color-info-bg: #bee3f8; --color-info-text: #2c5282; --color-info-icon: #4299e1; } [data-theme="dark"] { color-scheme: dark; /* Surfaces */ --color-bg-page: #171923; --color-bg-card: #1a202c; /* #5c6b86 - verified 3.0-3.25:1 against both surfaces below, clearing the 3:1 WCAG non-text/UI-component threshold used for borders (not the 4.5:1 text threshold, which doesn't apply to borders). */ --color-border: #5c6b86; --color-border-strong: #718096; --color-shadow: rgba(0, 0, 0, 0.4); --color-shadow-strong: rgba(0, 0, 0, 0.6); /* Text - each verified against both --color-bg-page (#171923) and --color-bg-card (#1a202c), whichever is the weaker (lower) of the two ratios is the one that has to clear AA, and does. */ --color-text-heading: #f7fafc; /* 16.70:1 vs page, 14.55:1 vs card */ --color-text-body: #e2e8f0; /* 14.20:1 vs page, 13.24:1 vs card */ --color-text-secondary: #cbd5e0; /* 11.78:1 vs page, 10.98:1 vs card */ --color-text-muted: #a0aec0; /* 7.76:1 vs page, 7.23:1 vs card - passes AA, unlike its light-mode counterpart above */ --color-text-faint: #94a7c4; /* 7.15:1 vs page, 6.67:1 vs card - passes AA, unlike its light-mode counterpart above */ /* Brand - button background kept the same brand blue/purple in both themes (a deliberate identity choice, not an oversight); brand used as small text/icons is lightened, since #667eea itself only clears 4.46:1 against the dark card surface (fine for large text/icons, not guaranteed for small body text). */ --color-brand: #667eea; --color-brand-dark: #764ba2; --color-brand-hover: #7c8ff0; --color-brand-text: #8fa4f3; /* 6.82:1 vs card */ --color-on-brand: #ffffff; /* Status: success */ --color-success-bg: #1c4532; --color-success-text: #9ae6b4; /* 7.37:1 vs its own badge bg */ --color-success-icon: #68d391; /* Status: danger */ --color-danger-bg: #4c1d1d; --color-danger-text: #fc8181; /* 5.73:1 vs its own badge bg */ --color-danger-icon: #fc8181; /* Status: warning */ --color-warning-bg: #4a2c0a; --color-warning-text: #fbd38d; /* 8.94:1 vs its own badge bg */ --color-warning-icon: #f6ad55; /* Status: info */ --color-info-bg: #1e3a5f; --color-info-text: #90cdf4; /* 6.70:1 vs its own badge bg */ --color-info-icon: #63b3ed; } /* Prevents the page background/text from flashing unstyled between first paint and this stylesheet finishing its cascade - belt-and- suspenders with the inline no-flash script, which already sets data-theme before paint; this just makes sure picks up the right page-level colors immediately once the stylesheet applies. */ html { background: var(--color-bg-page); } body { background: var(--color-bg-page); color: var(--color-text-body); }