/*
* 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;
--bg-app: #FDFBF7;
--bg-surface: #F5F2ED;
--bg-elevated: #FFFFFF;
--bg-input: #FFFFFF;
--bg-overlay: rgba(0, 0, 0, 0.4);
--border-subtle: #E5E1D8;
--border-strong: #2C2416;
--text-primary: #2C2416;
--text-secondary: #5F5647;
--text-muted: #8E8677;
--text-on-accent: #FFFFFF;
--accent-primary: #D97706;
--accent-primary-hover: #B45309;
--accent-secondary: #6B7D52;
--accent-warning: #DC2626;
--accent-success: #166534;
--link: #D97706;
}
[data-theme="dark"] {
color-scheme: dark;
--bg-app: #1A1917;
--bg-surface: #23211D;
--bg-elevated: #2E2B27;
--bg-input: #1A1917;
--bg-overlay: rgba(0, 0, 0, 0.6);
--border-subtle: #2D2A26;
--border-strong: #524D44;
--text-primary: #F2EFE9;
--text-secondary: #B8AFA0;
--text-muted: #A39C8E;
--text-on-accent: #1A1917;
--accent-primary: #E8893A;
--accent-primary-hover: #F2A155;
--accent-secondary: #9DB37C;
--accent-warning: #E07A6E;
--accent-success: #5BB87A;
--link: #FDBA74;
}
html, body {
background: var(--bg-app);
color: var(--text-primary);
}
.nav-product,
.nav-product-shell {
display: inline-flex;
align-items: center;
text-decoration: none;
}
/* TripMate parent-nav product link. The full attribution lockup lives on
TripMate surfaces; Tripgen nav keeps this as a clean product link. */
.nav-links a.nav-product.nav-product--tripmate {
display: inline-flex;
align-items: center;
gap: 0.42rem;
padding: 0.34rem 0.72rem 0.34rem 0.5rem;
border: 1.5px solid #102c44;
border-radius: 999px;
background: #f5f0eb;
color: #102c44 !important;
line-height: 1;
letter-spacing: 0;
text-decoration: none;
white-space: nowrap;
transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.nav-links a.nav-product.nav-product--tripmate:hover {
background: #fffaf2;
color: #102c44 !important;
border-color: #c4601d;
text-decoration: none;
transform: translateY(-1px);
}
.nav-product--tripmate .nav-product-mark {
display: block;
width: 22px;
height: 22px;
flex: 0 0 22px;
border-radius: 6px;
}
.nav-product--tripmate .nav-product-wordmark {
display: block;
font-family: 'DM Serif Display', Georgia, serif;
font-size: 1.02rem;
font-weight: 400;
line-height: 0.95;
color: #102c44;
}
.mobile-menu-panel a.nav-product.nav-product--tripmate {
display: flex;
align-items: center;
gap: 0.45rem;
padding: 0.9rem 0.25rem;
border-bottom: 1px solid rgba(16, 44, 68, 0.1);
color: var(--text) !important;
line-height: 1;
letter-spacing: 0;
text-decoration: none;
}
.mobile-menu-panel a.nav-product.nav-product--tripmate .nav-product-mark {
width: 20px;
height: 20px;
flex-basis: 20px;
border-radius: 5px;
}
.mobile-menu-panel a.nav-product.nav-product--tripmate .nav-product-wordmark {
font-family: 'DM Sans', system-ui, sans-serif;
font-size: 1.05rem;
font-weight: 700;
line-height: 1;
color: var(--text);
}
/* Parent nav desktop guard.
The full desktop link set is wider than 1440px on content-heavy pages, so
collapse to the pinned CTA + hamburger before the nav can clip. */
@media (max-width: 1500px) {
body .site-nav:has(.nav-hamburger) .nav-links {
display: none !important;
}
body .site-nav:has(.nav-hamburger) .nav-hamburger {
display: inline-flex !important;
}
body .site-nav:has(.nav-hamburger) .nav-cta-pinned {
display: inline-flex !important;
}
body .site-nav:has(.nav-hamburger) .nav-logo svg {
width: 220px;
height: auto;
}
}
/* Legacy/simple nav guard.
A few older pages have a small link-only nav and no hamburger. Let those
links wrap on narrow screens instead of sliding off the viewport. */
@media (max-width: 700px) {
body .site-nav:not(:has(.nav-hamburger)) {
flex-wrap: wrap;
justify-content: center;
row-gap: 0.65rem;
}
body .site-nav:not(:has(.nav-hamburger)) .nav-links {
flex-wrap: wrap;
justify-content: center;
width: 100%;
gap: 0.65rem 0.9rem;
}
}
/* 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);
}