/* Theme tokens */
:root {
    --theme-bg: #ffffff;
    --theme-surface: #f4f4f5;
    --theme-card: #ffffff;
    --theme-text: #151515;
    --theme-border: #e8e8e8;
    --theme-muted-text: #000;
}

html[data-theme="dark"] {
    /* Softer, eye-friendly dark theme */
    --theme-bg: #1a1f26; /* lifted from near-black */
    --theme-surface: #222832; /* clearer separation */
    --theme-card: #262d38; /* gentle elevation */
    --theme-text: #e6ebf2; /* soft off-white */
    --theme-border: #343c48; /* visible but subtle */
    --theme-muted-text: #a9b2bf; /* readable secondary text */
}

body,
.main {
    background-color: var(--theme-bg);
    color: var(--theme-text);
}
.navigation-top {
    background-color: var(--theme-bg);
}
html[data-theme="dark"] .theme-toggle-btn {
    background: #343c48;
    color: #ffffff;
    border-color: #343c48;
}
[data-theme="dark"] #why .full-image .title-floater {
    background-color: var(--theme-bg);
}
[data-theme="dark"] #why path {
    fill: var(--theme-bg);
}
[data-theme="dark"] .exclusives-close {
    background-color: var(--theme-bg);
    color: var(--theme-text);
}
.exclusives-title {
    color: var(--theme-text);
}
#why .full-image .para-floater {
    background-color: var(--theme-bg);
}