/* ────────────────────────────────────────────────────────────── * Pensio — Dark theme ("Sage at night") (v0.55.0) * * A soft, warm "dim" dark: deep sage-charcoal grounds (never black), * warm off-white text (never pure white), elevation by lightness * (shadows barely read on dark), accents lifted to a desaturated * mint-sage, Terra kept as the warmth anchor so the mode never reads * cold. Re-points the existing base tokens (themes/default.css) so every * component goes dark with no rewrite; overloaded-token cases get * explicit component overrides (added in Phase B). * * Activation: . The attribute carries the * RESOLVED theme (light/dark/default) — the user's preference rides in * , and a no-flash resolver in base.html turns * "system" into light/dark from prefers-color-scheme before first paint. * Keying on a single attribute (not @media) keeps this file un-duplicated * and lets the native shells reuse the same signal. * * Values ported from the design system (tmp/Pensio Design System/ * tokens/theme-dark.css), mapped onto Pensio's real token names. Where * they diverge it is deliberate — see docs/phases/v0.55.0-dark-mode.md. * ────────────────────────────────────────────────────────────── */ [data-theme="dark"] { /* ── Grounds & surfaces — elevation = lighter ── */ --background: #161A12; /* app ground (darkest) */ --card-background: #1D2218; /* cards, nav, topbar, inputs */ --surface: #1D2218; --card-bg: #222A1D; --bento-bg: #262C20; /* inset fills, tracks */ --hero-bg: #1D2218; --background-hover: #232A1D; --hover-color: #232A1D; /* ── Borders → light hairlines (dark borders vanish on dark) ── */ --border-color: rgba(233, 237, 228, 0.12); --border-light: rgba(233, 237, 228, 0.07); /* ── Text → warm off-white ramp (no pure white, avoids halation) ── */ --text-color: #E7EAE0; --ink: #E7EAE0; --text-secondary: #ABB4A3; --ink-mid: #ABB4A3; --ink-faint: #7E8778; --title: #F1F3EB; --text-inverse: #14180F; /* dark text now sits on light-sage fills */ /* ── Accents → lifted, desaturated (bright greens vibrate on dark) ── */ --primary: #AEC0A9; /* reads as TEXT/icon on dark; fills overridden */ --primary-dark: #C2D2BD; /* lifted: our --primary-dark is ~80% TEXT, not a fill */ --primary-light: rgba(174, 192, 169, 0.15); --accent: #9CB097; --accent-dark: #AEC0A9; --accent-light: rgba(174, 192, 169, 0.15); --accent-text: #AEC0A9; /* undefined in light; sane sage in dark (118 app uses) */ --sage-text: #A9C3AE; /* ── Terra → the warmth anchor, lifted for contrast ── */ --terra: #D8C5A4; --terra-lo: #E2D4B8; --terra-bg: rgba(216, 197, 164, 0.16); --terra-text: #DBC8A6; /* ── Status → softened foregrounds on dark tinted grounds ── */ --success: #6FCF8E; --success-bg: rgba(34, 197, 94, 0.16); --success-text: #9FE0B2; --success-border: rgba(34, 197, 94, 0.30); --warning: #E5B768; --warning-bg: rgba(245, 158, 11, 0.15); --warning-text: #EBCB93; --warning-border: rgba(245, 158, 11, 0.30); --error: #EF7E7E; --error-bg: rgba(239, 68, 68, 0.16); --error-text: #F3A5A5; --error-border: rgba(239, 68, 68, 0.30); --info: #AEC0A9; --info-bg: rgba(174, 192, 169, 0.15); --info-text: #C2D2BD; --info-border: rgba(174, 192, 169, 0.30); --danger: #EF7E7E; /* ── Semantic layer → dark (for components that adopt it) ── */ --surface-ground: #161A12; --surface-raised: #1D2218; --surface-inset: #262C20; --surface-hover: #232A1D; --text-body: #E7EAE0; --text-title: #F1F3EB; --text-muted: #7E8778; --border-faint: rgba(233, 237, 228, 0.07); --accent-on-surface: #AEC0A9; --accent-tint: rgba(174, 192, 169, 0.15); --accent-fill: #AEC0A9; --accent-on-fill: #14180F; --chat-user-fill: #3C5340; --chat-user-text: #ECF1EA; /* ── Shadows → deeper & neutral (sage tint disappears on dark) ── */ --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.30); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.42); --shadow-lg: 0 10px 34px rgba(0, 0, 0, 0.48); --shadow-xl: 0 14px 44px rgba(0, 0, 0, 0.40); color-scheme: dark; /* native form controls, scrollbars */ } /* Smooth the theme flip — color/background only, and only when the user * has not asked for reduced motion. */ @media (prefers-reduced-motion: no-preference) { [data-theme="dark"] body { transition: background-color 0.25s ease, color 0.25s ease; } } /* ──────────────────────────────────────────────────────────────── * Component overrides — overloaded-token cases a token flip alone gets * wrong. Anything using var(--text-inverse) (.btn-primary, .error-actions * .btn-primary, .emotion-bar .bar-fill, .quick-capture-submit) already * inverts correctly and needs nothing here. * ──────────────────────────────────────────────────────────────── */ /* 1. Hardcoded white text on a --primary / --accent / --semantic-success * fill. Those fills LIFT to light sage in dark, so white-on-light goes * illegible → force the dark on-fill ink (tonal inversion). Button SVG * icons inherit via currentColor. */ [data-theme="dark"] .explore-send-btn, [data-theme="dark"] .btn-new-explore, [data-theme="dark"] .advisor-pro-badge, [data-theme="dark"] .insight-number, [data-theme="dark"] .tier-badge.pro, [data-theme="dark"] .tier-badge.trial, [data-theme="dark"] .type-badge.weekly, [data-theme="dark"] .type-badge.monthly, [data-theme="dark"] .subscription-badge, [data-theme="dark"] .app-badge-soon, [data-theme="dark"] .focus-btn[aria-pressed="true"], [data-theme="dark"] .focus-reset-chip[aria-pressed="true"], [data-theme="dark"] .sr-only-focusable:focus { color: var(--accent-on-fill); /* #14180F on the lifted-sage fill */ } /* 2. Dominant emotion tag — filled with --primary-dark (lifts to light) + * white text. Re-fill with the on-surface sage + dark ink. */ [data-theme="dark"] .emotion-tag.primary { background: var(--accent-fill); color: var(--accent-on-fill); border-color: var(--accent); } /* 3. User chat bubble — deep saturated sage + light text (chat convention), * not the lifted-sage fill the token flip would otherwise give. */ [data-theme="dark"] .message-user .message-bubble { background: var(--chat-user-fill); /* #3C5340 */ color: var(--chat-user-text); /* #ECF1EA */ } /* 4. Garden card — the light washes (6–14% alpha) are near-invisible on the * dark ground. Raise alpha so each growth level stays a luminous brand * moment; the solid progress-fill gradients read as-is. */ [data-theme="dark"] .garden-card--seedling { background: linear-gradient(135deg, rgba(34,197,94,.12), rgba(74,222,128,.20)); border-color: rgba(74,222,128,.30); } [data-theme="dark"] .garden-card--sprout { background: linear-gradient(135deg, rgba(34,197,94,.14), rgba(16,185,129,.22)); border-color: rgba(16,185,129,.32); } [data-theme="dark"] .garden-card--bloom { background: linear-gradient(135deg, rgba(174,192,169,.14), rgba(216,197,164,.18)); border-color: rgba(216,197,164,.30); } [data-theme="dark"] .garden-card--grove { background: linear-gradient(135deg, rgba(22,163,74,.14), rgba(132,204,22,.20)); border-color: rgba(132,204,22,.30); } [data-theme="dark"] .garden-card--sanctuary { background: linear-gradient(135deg, rgba(13,148,136,.16), rgba(202,138,4,.18)); border-color: rgba(202,138,4,.30); } [data-theme="dark"] .garden-card--wildwood { background: linear-gradient(135deg, rgba(124,58,237,.18), rgba(16,185,129,.20)); border-color: rgba(124,58,237,.34); } [data-theme="dark"] .garden-card--forest { background: linear-gradient(135deg, rgba(20,83,45,.24), rgba(22,163,74,.26)); border-color: rgba(22,163,74,.34); } /* 5. Icons in dark. * Simple glyphs (side-nav, line icons) are two-tone via var(--accent) + * currentColor; in dark both resolve to light sages, so the pair muddies * into a flat near-same-colour blob — unify the accent tone to currentColor * for a clean single-tone glyph. The illustrative icons (advisors, gauge, * scale, …) instead pair a hardcoded light body (#9CA998) + dark detail * (#3A4238): that stays crisp on dark (the light body pops on the dark * ground; the dark detail reads on the body), so it is left as-is — forcing * it single-tone would merge the detail into the body (a blank disc). Terra * parts are lifted so the warm accent stays visible. */ [data-theme="dark"] svg path[fill="var(--accent)"], [data-theme="dark"] svg rect[fill="var(--accent)"], [data-theme="dark"] svg circle[fill="var(--accent)"], [data-theme="dark"] svg polygon[fill="var(--accent)"] { fill: currentColor; } /* Terra parts → lifted warm accent (mirror --terra / --terra-lo / --terra-text) */ [data-theme="dark"] svg [fill="#CAB99E"] { fill: #D8C5A4; } [data-theme="dark"] svg [fill="#DDD0BA"] { fill: #E2D4B8; } [data-theme="dark"] svg [fill="#7D6340"] { fill: #DBC8A6; }