/* aw-themes.css — Switchable brand themes (Layer 2, sibling of aw-tokens.css). * * Each theme is a [data-theme] CSS rule that sets every colour token * the rest of the system references. Switching themes is a single * attribute swap on : * * ← CSS Enroll Match (default, parent brand) * ← Clinical Calm (teal/coral) * ← Modern Indigo * ← Conservative Navy * * The :root rule mirrors data-theme="d" so the page renders correctly * even if the data-theme attribute is missing (e.g., before the * head-script runs, or for users with localStorage disabled). * * Token contract — every theme MUST define exactly these: * --aw-color-primary * --aw-color-primary-dark * --aw-color-primary-light * --aw-color-accent * --aw-color-success * --aw-color-danger * --aw-color-warning * --aw-color-text * --aw-color-text-muted * --aw-color-border * --aw-color-bg-page * --aw-color-bg-card * --aw-color-bg-header * * If any token is missing from a theme, the whole theme breaks because * downstream CSS uses var(--aw-color-…) without fallbacks. * * See: docs/brand/2026-04-30-brand-direction-proposal.md * docs/brand/preview.html */ /* --------------------------------------------------------------- :root default = Theme D (CSS Enroll Match — parent brand) --------------------------------------------------------------- */ :root { --aw-color-primary: #000099; --aw-color-primary-dark: #000077; --aw-color-primary-light: #E0E0FF; --aw-color-accent: #FF4556; --aw-color-success: #5CC2AE; --aw-color-danger: #ee4859; --aw-color-warning: #fdb81e; --aw-color-text: #1e293b; --aw-color-text-muted: #575757; --aw-color-border: #e2e8f0; --aw-color-bg-page: #f8fafc; --aw-color-bg-card: #ffffff; --aw-color-bg-header: #000099; } /* --------------------------------------------------------------- Theme D — CSS Enroll Match (parent brand cssenroll.com) Same as :root default; explicit attribute selector lets the theme-switcher write data-theme="d" without behaviour change. --------------------------------------------------------------- */ [data-theme="d"] { --aw-color-primary: #000099; --aw-color-primary-dark: #000077; --aw-color-primary-light: #E0E0FF; --aw-color-accent: #FF4556; --aw-color-success: #5CC2AE; --aw-color-danger: #ee4859; --aw-color-warning: #fdb81e; --aw-color-text: #1e293b; --aw-color-text-muted: #575757; --aw-color-border: #e2e8f0; --aw-color-bg-page: #f8fafc; --aw-color-bg-card: #ffffff; --aw-color-bg-header: #000099; } /* --------------------------------------------------------------- Theme A — Clinical Calm (teal-forward, medical) --------------------------------------------------------------- */ [data-theme="a"] { --aw-color-primary: #0e7490; --aw-color-primary-dark: #155e75; --aw-color-primary-light: #cffafe; --aw-color-accent: #fb7185; --aw-color-success: #059669; --aw-color-danger: #e11d48; --aw-color-warning: #d97706; --aw-color-text: #0f172a; --aw-color-text-muted: #475569; --aw-color-border: #e2e8f0; --aw-color-bg-page: #f8fafc; --aw-color-bg-card: #ffffff; --aw-color-bg-header: #0f3a4d; } /* --------------------------------------------------------------- Theme B — Modern Indigo (evolution of original cobalt blue) --------------------------------------------------------------- */ [data-theme="b"] { --aw-color-primary: #4338ca; --aw-color-primary-dark: #3730a3; --aw-color-primary-light: #e0e7ff; --aw-color-accent: #10b981; --aw-color-success: #16a34a; --aw-color-danger: #dc2626; --aw-color-warning: #f59e0b; --aw-color-text: #1e293b; --aw-color-text-muted: #64748b; --aw-color-border: #e2e8f0; --aw-color-bg-page: #f8fafc; --aw-color-bg-card: #ffffff; --aw-color-bg-header: #1e1b4b; } /* --------------------------------------------------------------- Theme C — Conservative Navy (stately enterprise) --------------------------------------------------------------- */ [data-theme="c"] { --aw-color-primary: #1e3a8a; --aw-color-primary-dark: #1e2456; --aw-color-primary-light: #dbeafe; --aw-color-accent: #0891b2; --aw-color-success: #15803d; --aw-color-danger: #b91c1c; --aw-color-warning: #d97706; --aw-color-text: #1e293b; --aw-color-text-muted: #64748b; --aw-color-border: #e2e8f0; --aw-color-bg-page: #f8fafc; --aw-color-bg-card: #ffffff; --aw-color-bg-header: #0f1d3d; } /* --------------------------------------------------------------- Theme E — High Contrast (WCAG AAA accessibility) Pure black text on pure white surfaces; saturated link-blue accent for unambiguous focus + interactive affordance. Intended for low-vision users and high-glare environments. --------------------------------------------------------------- */ [data-theme="e"] { --aw-color-primary: #000000; --aw-color-primary-dark: #000000; --aw-color-primary-light: #e5e5e5; --aw-color-accent: #0000ee; --aw-color-success: #006400; --aw-color-danger: #a30000; --aw-color-warning: #8a4b00; --aw-color-text: #000000; --aw-color-text-muted: #333333; --aw-color-border: #000000; --aw-color-bg-page: #ffffff; --aw-color-bg-card: #ffffff; --aw-color-bg-header: #000000; }