/* ═══════════════════════════════════════════════════
   Light/Dark Theme Toggle — AstroSense Demo
   Full override for all page elements
   ═══════════════════════════════════════════════════ */

/* ── Light mode: override ALL CSS variables ── */
html:not(.dark) {
    --dark: #F9F8F6;
    --dark-2: #f0ede6;
    --light: #1a1a2e;
    --gray: #5a5d68;
    --gray-dark: #3a3c44;
    --gold-10: rgba(180, 140, 60, .08);
    --gold-15: rgba(180, 140, 60, .12);
    --gold-20: rgba(180, 140, 60, .16);
    --gold-30: rgba(180, 140, 60, .25);
}

/* ── Body ── */
html:not(.dark) body {
    background: #F9F8F6;
    color: #1a1a2e;
}

/* ── Header / Nav ── */
html:not(.dark) header {
    background: rgba(249, 248, 246, .95) !important;
    border-bottom-color: rgba(180, 140, 60, .15) !important;
    backdrop-filter: blur(12px);
}

html:not(.dark) header h1,
html:not(.dark) header .site-title {
    color: #1a1a2e;
}

html:not(.dark) nav a {
    color: #5a5d68;
}

html:not(.dark) nav a:hover,
html:not(.dark) nav a.active {
    color: var(--gold);
}

/* ── Badges ── */
html:not(.dark) .badge,
html:not(.dark) .api-badge {
    border-color: rgba(180, 140, 60, .2);
    color: var(--gold);
}

/* ── Profile banner / Controls ── */
html:not(.dark) .pban,
html:not(.dark) .ctl,
html:not(.dark) .tab-bar,
html:not(.dark) .date-ctl {
    background: rgba(180, 140, 60, .04);
    border-color: rgba(180, 140, 60, .1);
}

/* ── Tabs ── */
html:not(.dark) .tabs button,
html:not(.dark) .tab-bar button,
html:not(.dark) .tab {
    color: #5a5d68;
    border-color: transparent;
}

html:not(.dark) .tabs button.active,
html:not(.dark) .tabs button:hover,
html:not(.dark) .tab-bar button.active,
html:not(.dark) .tab.active {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

/* ── Sections ── */
html:not(.dark) .section,
html:not(.dark) .sec {
    color: #1a1a2e;
}

html:not(.dark) .section-title,
html:not(.dark) .st {
    color: #8B6914;
}

/* ── Cards ── */
html:not(.dark) .card,
html:not(.dark) .summary-card {
    background: rgba(180, 140, 60, .03);
    border-color: rgba(180, 140, 60, .12);
    color: #1a1a2e;
}

html:not(.dark) .card-label,
html:not(.dark) .cl {
    color: #8B6914;
}

html:not(.dark) .card-sub {
    color: #5a5d68;
}

html:not(.dark) .card-value {
    color: #1a1a2e;
}

/* ── Data rows ── */
html:not(.dark) .data-row {
    border-bottom-color: rgba(180, 140, 60, .08);
    color: #1a1a2e;
}

html:not(.dark) .data-name {
    color: #1a1a2e;
}

html:not(.dark) .data-val {
    color: #8B6914;
}

html:not(.dark) .data-val2 {
    color: #5a5d68;
}

/* ── Big numbers ── */
html:not(.dark) .big-number {
    color: var(--gold);
}

/* ── Tables ── */
html:not(.dark) .ct th,
html:not(.dark) table th {
    color: #5a5d68;
    border-bottom-color: rgba(180, 140, 60, .12);
}

html:not(.dark) .ct td,
html:not(.dark) table td {
    color: #1a1a2e;
    border-bottom-color: rgba(180, 140, 60, .06);
}

html:not(.dark) .ct td.nat {
    color: #5a5d68;
}

html:not(.dark) .ct td.prg,
html:not(.dark) .ct td.rev {
    color: #8B6914;
}

/* ── Aspects ── */
html:not(.dark) .ar {
    border-bottom-color: rgba(180, 140, 60, .06);
}

html:not(.dark) .ap {
    color: #1a1a2e;
}

html:not(.dark) .an {
    color: #5a5d68;
}

html:not(.dark) .ah {
    color: #22805e;
    background: rgba(34, 128, 94, .08);
}

html:not(.dark) .ad {
    color: #b44;
    background: rgba(187, 68, 68, .08);
}

html:not(.dark) .ao {
    color: #5a5d68;
}

/* ── Retrograde ── */
html:not(.dark) .retro {
    color: #cc3333;
}

/* ── Tab hints ── */
html:not(.dark) .tab-hint {
    color: #5a5d68;
}

/* ── Error ── */
html:not(.dark) .error {
    color: #cc3333;
    background: rgba(204, 51, 51, .06);
    border-color: rgba(204, 51, 51, .15);
}

/* ── Pinnacle diagram ── */
html:not(.dark) .pinnacle-bar {
    background: rgba(180, 140, 60, .12);
}

html:not(.dark) .pinnacle-bar.active {
    background: rgba(180, 140, 60, .25);
}

html:not(.dark) .pinnacle-num,
html:not(.dark) .pinnacle-label {
    color: #1a1a2e;
}

html:not(.dark) .pinnacle-ages {
    color: #5a5d68;
}

/* ── Buttons / Inputs ── */
html:not(.dark) button,
html:not(.dark) select {
    color: #1a1a2e;
    border-color: rgba(180, 140, 60, .2);
}

html:not(.dark) input,
html:not(.dark) select {
    background: #fff;
    color: #1a1a2e;
}

/* ── Links inside content ── */
html:not(.dark) a {
    color: var(--gold);
}

/* ── Scrollbar ── */
html:not(.dark) ::-webkit-scrollbar-thumb {
    background: rgba(180, 140, 60, .2);
}

html:not(.dark) ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .03);
}

/* ═══════════════════════════════════════════
   Toggle button (always visible)
   ═══════════════════════════════════════════ */
.theme-btn {
    font-family: var(--fn, var(--font-sans, 'Montserrat', sans-serif));
    font-size: 15px;
    background: none;
    border: 1px solid rgba(197, 160, 89, .2);
    color: var(--gold);
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 4px;
    transition: .3s;
    line-height: 1;
}

.theme-btn:hover {
    border-color: var(--gold);
    background: rgba(197, 160, 89, .1);
}