/*
* theme.css -- Tripgen 17-token palette
*
* Spec: docs/superpowers/specs/2026-04-26-account-hub-1-theme-palette.md
* Locked 2026-04-26 (con-psy override of brand-strategist v1).
*
* Apply via in
* before any page-specific stylesheet. Theme is set via [data-theme="dark"]
* on by /assets/js/theme.js (loaded as a blocking script).
*/
:root {
color-scheme: light;
--brand-navy: #102c44;
--brand-cream: #f5f0eb;
--brand-orange: #c4601d;
--bg-app: #f5f0eb;
--bg-surface: #ede4d2;
--bg-elevated: #fbf7ee;
--bg-input: #ffffff;
--bg-overlay: rgba(0, 0, 0, 0.4);
--border-subtle: #d8cab7;
--border-strong: #102c44;
--text-primary: #102c44;
--text-secondary: #41566a;
--text-muted: #6f7b84;
--text-on-accent: #ffffff;
--accent-primary: #c4601d;
--accent-primary-hover: #9f4b17;
--accent-secondary: #4f6f5a;
--accent-warning: #b6472c;
--accent-success: #2f6b4f;
--link: #c4601d;
}
[data-theme="dark"] {
color-scheme: dark;
--bg-app: #0f2234;
--bg-surface: #182f44;
--bg-elevated: #20394f;
--bg-input: #0f2234;
--bg-overlay: rgba(0, 0, 0, 0.6);
--border-subtle: #2c4a60;
--border-strong: #e8dfd0;
--text-primary: #f6efe3;
--text-secondary: #d8cdbd;
--text-muted: #aebdcc;
--text-on-accent: #ffffff;
--accent-primary: #dd7c3a;
--accent-primary-hover: #f09a5c;
--accent-secondary: #9eb88c;
--accent-warning: #e07a6e;
--accent-success: #64bf86;
--link: #f09a5c;
}
html, body {
background: var(--bg-app);
color: var(--text-primary);
}
/* Product nav badge -- shared across pages via canonical nav partial */
.nav-product {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.3rem 0.7rem 0.3rem 0.55rem;
border: 1.5px solid var(--brand-navy);
border-radius: 999px;
background: var(--brand-cream);
color: var(--brand-navy) !important;
font-family: 'DM Serif Display', Georgia, serif;
font-size: 0.95rem !important;
font-weight: 400 !important;
line-height: 1;
letter-spacing: 0;
text-decoration: none;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.nav-product:hover {
background: var(--brand-navy);
color: var(--brand-cream) !important;
border-color: var(--brand-navy);
}
.nav-product:hover .nav-product-tick { stroke: var(--brand-cream); }
.nav-product-mark { width: 18px; height: 18px; flex-shrink: 0; }
.nav-product-mark .nav-product-disc { fill: var(--brand-orange); }
.nav-product-mark .nav-product-tick { stroke: var(--brand-navy); transition: stroke 0.15s; }
/* Dark-mode override for inline brand SVG wordmark.
Source SVGs hard-code fill="#102c44" (brand-navy) on the "Tripgen"
element, which becomes unreadable on the dark page background. Compass disc
and orange route stroke remain untouched. */
[data-theme="dark"] .nav-logo svg text,
[data-theme="dark"] .hero-logo svg text {
fill: var(--text-primary);
}