/* Base layout and typography */
body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: #ffffff;
    /* bgPrimary */
    color: #1a3c6e;
    /* textPrimary */
}

/* Color tokens for non-utility use */
:root {
    --color-fingold: #d4af37;
    --color-fingold-hover: #b5952f;
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --brand-blue: #2c5282;
    --text-primary: #1a3c6e;
    --text-secondary: #475569;
    --finBlue: #0f4c81;
    --finDarkBlue: #1a3c6e;
    --finLightBlue: #3584c4;
    --finLight: #f7fafc;
}

/* Theme Switching Overrides */
/* Dark Mode Override */
#module-container.mode-dark {
    --bg-primary: #0a192f;
    --bg-secondary: #112240;
    --text-primary: #e6f1ff;
    --text-secondary: #8892b0;
    --brand-blue: #2c5282;
}

#module-container.mode-dark .bg-primary {
    background-color: var(--bg-primary);
}

#module-container.mode-dark .track-title {
    color: var(--color-fingold) !important;
}

#module-container.mode-dark .track-list {
    color: rgba(136, 146, 176, 0.9);
}

#module-container.mode-dark .aside-card {
    border: 1px solid rgba(44, 82, 130, 0.4);
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.7);
}

/* Light Mode Override (Explicit) */
#module-container.mode-light {
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --text-primary: #1a3c6e;
    --text-secondary: #475569;
}

/* Active Button State */
.config-btn-active {
    background-color: var(--color-fingold) !important;
    color: var(--bg-primary) !important;
    border-color: var(--color-fingold) !important;
}

/* Use Case Variations */

/* Practice Vault Overview (Default) - Show full list */

/* Advisor Website Hero */
[data-use-case="advisor-website-hero"] .track-text {
    /* Slightly shorter copy visually handled by just hiding extra elements if needed, 
       but for now we'll keep the text as is or truncate with CSS if strictly required. 
       User asked for "fewer bullets". */
}

[data-use-case="advisor-website-hero"] .track-list {
    display: none;
}

/* Intake Form Step */
[data-use-case="intake-form-step"] .track-text {
    display: none;
}

[data-use-case="intake-form-step"] .track-list {
    display: none;
}

[data-use-case="intake-form-step"] .tracks-grid {
    gap: 1rem;
}

[data-use-case="intake-form-step"] .track-item {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-left: none;
    padding-left: 0;
}

#module-container.mode-dark [data-use-case="intake-form-step"] .track-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Simple utility-like helpers */
.bg-primary {
    background-color: var(--bg-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.bg-secondary {
    background-color: var(--bg-secondary);
}

.text-primary {
    color: var(--text-primary);
}

.text-secondary {
    color: var(--text-secondary);
}

.text-fingold {
    color: var(--color-fingold);
}

.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Nav */
.navbar {
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: 50;
    background-color: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    padding: 0.5rem 1.5rem;
}

.navbar-inner {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #1a3c6e;
}

.nav-links a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
}

.nav-links a:hover {
    color: var(--color-fingold);
}

.nav-cta {
    background-color: var(--color-fingold);
    color: #1a3c6e;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.nav-cta:hover {
    color: #ffffff;
    background-color: var(--color-fingold-hover);
}

/* Mobile menu */
.nav-mobile-toggle {
    display: none;
    border: none;
    background: none;
    color: #1a3c6e;
    font-weight: 700;
    font-size: 0.85rem;
}

.nav-mobile {
    display: none;
    position: fixed;
    top: 88px;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.2);
    padding: 0.75rem 1rem;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    z-index: 40;
}

.nav-mobile a {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-decoration: none;
    color: #1a3c6e;
}

.nav-mobile a:hover {
    color: var(--color-fingold);
}

/* Responsive nav */
@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .nav-mobile-toggle {
        display: block;
    }
}

/* Main layout */
main {
    padding-top: 160px;
    /* fixed nav offset */
}

/* Tracks layout */
.tracks-grid {
    display: grid;
    gap: 3rem;
    transition: gap 0.3s ease;
}

@media (min-width: 1024px) {
    .tracks-grid {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
}

/* Track item */
.track-item {
    border-left: 2px solid var(--brand-blue);
    padding-left: 1.5rem;
    margin-bottom: 2rem;
    transition: all 0.3s ease;
}

.track-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--finDarkBlue);
    margin: 0 0 0.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.track-title a {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-decoration: none;
    color: var(--color-fingold);
    border-bottom: 1px solid transparent;
}

.track-title a:hover {
    border-color: var(--color-fingold);
}

.track-text {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.track-list {
    margin: 0.25rem 0 0;
    padding-left: 1.5rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* Sticky aside */
.aside-card {
    position: sticky;
    top: 128px;
    background-color: var(--bg-secondary);
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Footer */
.site-footer {
    padding: 2.5rem 0 2rem;
    background-color: #020617;
    color: #94a3b8;
    margin-top: 3rem;
}

.site-footer a {
    color: inherit;
    text-decoration: none;
    margin: 0 0.75rem;
    transition: color 0.2s ease;
}

.site-footer a:hover {
    color: var(--color-fingold);
}