/* Theme-safe default typography.
   Component-specific colors can override these defaults when they have a
   stronger selector, while unstyled content remains readable in both themes. */
h1,
h2,
h3,
h4,
h5 {
    color: var(--text-primary);
}

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

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5 {
    color: var(--text-primary);
}

[data-theme="dark"] p {
    color: var(--text-secondary);
}

/* The account dropdown header has a branded dark background in both themes. */
.header-user-section .dropdown-header-user,
.header-user-section .dropdown-header-user p,
.header-user-section .dropdown-header-user h1,
.header-user-section .dropdown-header-user h2,
.header-user-section .dropdown-header-user h3,
.header-user-section .dropdown-header-user h4,
.header-user-section .dropdown-header-user h5,
.header-user-section .dropdown-header-user strong,
.header-user-section .dropdown-header-user small {
    color: #ffffff !important;
}

.header-user-section .dropdown-header-user .small {
    color: rgba(255, 255, 255, 0.92) !important;
    opacity: 1 !important;
}