/* heala-themes.css * ---------------------------------------------------------------------------- * User-selectable theme variants. The default Heala palette (teal #0D9488 + * slate) stays untouched in :root / [data-theme="light"|"dark"]; this file * adds three optional variants that override key CSS variables when the * element carries `data-theme-variant=""`. * * Variants: * heritage — burgundy + cream + forest green (Option A in /previews) * modern-sa — indigo + sand + sunset orange (Option B in /previews) * pastel — sage + ivory + coral (Option C in /previews) * * Each variant overrides: * • Surface colors (bg-page, bg-card, bg-secondary, bg-tertiary) * • Accent palette (accent, accent-hover, accent-soft, accent-soft-2) * • Text + borders, where the contrast against the new surfaces requires it * * Dark mode + variant: only the accent colors swap. Dark surfaces stay * consistent so users in low-light still get the same readability across * themes. * ---------------------------------------------------------------------------- */ /* ── HERITAGE ──────────────────────────────────────────────────────────── */ [data-theme-variant="heritage"][data-theme="light"], [data-theme-variant="heritage"]:not([data-theme="dark"]) { --bg-page: #faf7f2; --bg-card: #ffffff; --bg-secondary: #f5efe6; --bg-tertiary: #ede0c8; --bg-input: #ffffff; --text-primary: #1f1410; --text-secondary: #6b5b4c; --text-muted: #9e8a78; --border: rgba(31, 20, 16, 0.10); --border-strong: rgba(31, 20, 16, 0.22); --accent: #7c2d12; --accent-hover: #5a1e0a; --accent-soft: rgba(124, 45, 18, 0.08); --accent-soft-2: rgba(124, 45, 18, 0.18); /* Sidebar navy → deep oxblood gradient. The legacy bundle reads these via the T color object (T.navy, T.navyMid, T.navyLight) which is patched to consume var(--nav-bg, ...) etc. */ --nav-bg: #3d1408; --nav-bg-mid: #5a1e0a; --nav-bg-light: #7c2d12; /* Status colors stay close to default but with warmer warning */ --text-danger: #9f1239; --text-warning: #b45309; --text-success: #166534; /* Map the legacy --color-* aliases the bundle uses */ --color-background-primary: var(--bg-card); --color-background-secondary: var(--bg-secondary); --color-background-tertiary: var(--bg-tertiary); --color-text-primary: var(--text-primary); --color-text-secondary: var(--text-secondary); --color-text-tertiary: var(--text-muted); } [data-theme-variant="heritage"][data-theme="dark"] { --accent: #c2410c; --accent-hover: #9a3412; --accent-soft: rgba(194, 65, 12, 0.16); --accent-soft-2: rgba(194, 65, 12, 0.28); } /* ── MODERN SOUTH AFRICAN ─────────────────────────────────────────────── */ [data-theme-variant="modern-sa"][data-theme="light"], [data-theme-variant="modern-sa"]:not([data-theme="dark"]) { --bg-page: #f5f1ea; --bg-card: #ffffff; --bg-secondary: #ede6d8; --bg-tertiary: #ddd2bd; --bg-input: #ffffff; --text-primary: #0c1430; --text-secondary: #4b5563; --text-muted: #94a3b8; --border: rgba(12, 20, 48, 0.10); --border-strong: rgba(12, 20, 48, 0.22); --accent: #1e3a8a; --accent-hover: #1e40af; --accent-soft: rgba(30, 58, 138, 0.08); --accent-soft-2: rgba(30, 58, 138, 0.18); /* Sunset-orange exposed for callout CTAs that want extra warmth */ --accent-warm: #ea580c; --accent-warm-hover: #c2410c; --accent-warm-soft: #ffedd5; /* Sidebar navy stays indigo-rich — the variant's identity */ --nav-bg: #0c1430; --nav-bg-mid: #1e3a8a; --nav-bg-light: #3b5cbe; --color-background-primary: var(--bg-card); --color-background-secondary: var(--bg-secondary); --color-background-tertiary: var(--bg-tertiary); --color-text-primary: var(--text-primary); --color-text-secondary: var(--text-secondary); --color-text-tertiary: var(--text-muted); } [data-theme-variant="modern-sa"][data-theme="dark"] { --accent: #6366f1; --accent-hover: #818cf8; --accent-soft: rgba(99, 102, 241, 0.16); --accent-soft-2: rgba(99, 102, 241, 0.28); --accent-warm: #fb923c; } /* ── PASTEL ───────────────────────────────────────────────────────────── */ [data-theme-variant="pastel"][data-theme="light"], [data-theme-variant="pastel"]:not([data-theme="dark"]) { --bg-page: #fdfcf7; --bg-card: #ffffff; --bg-secondary: #f3f1ea; --bg-tertiary: #e6e2d5; --bg-input: #ffffff; --text-primary: #2d2a26; --text-secondary: #7a7268; --text-muted: #aba39a; --border: rgba(45, 42, 38, 0.08); --border-strong: rgba(45, 42, 38, 0.22); --accent: #6b8e7f; --accent-hover: #4a6b5c; --accent-soft: #e9eee8; --accent-soft-2: rgba(107, 142, 127, 0.18); /* Coral exposed as a warm accent for important CTAs */ --accent-warm: #fb7185; --accent-warm-hover: #e11d48; --accent-warm-soft: #ffe4e6; /* Sidebar deep sage instead of navy — keeps the calm-pastel identity */ --nav-bg: #2d3f37; --nav-bg-mid: #4a6b5c; --nav-bg-light: #6b8e7f; --color-background-primary: var(--bg-card); --color-background-secondary: var(--bg-secondary); --color-background-tertiary: var(--bg-tertiary); --color-text-primary: var(--text-primary); --color-text-secondary: var(--text-secondary); --color-text-tertiary: var(--text-muted); } [data-theme-variant="pastel"][data-theme="dark"] { --accent: #84a98c; --accent-hover: #a8c0ad; --accent-soft: rgba(132, 169, 140, 0.16); --accent-soft-2: rgba(132, 169, 140, 0.28); --accent-warm: #fb7185; }