/* TapBios theme — system-aware light/dark tokens */

html[data-theme="light"] {
    color-scheme: light;
    --tb-bg: #FAFAF8;
    --tb-surface: #FFFFFF;
    --tb-surface-2: #F5F3EF;
    --tb-primary: #0891B2;
    --tb-primary-hover: #0E7490;
    --tb-accent: #0D9488;
    --tb-text: #1C1917;
    --tb-muted: #78716C;
    --tb-border: #E7E5E4;
    --tb-success: #059669;
    --tb-warning: #D97706;
    --tb-danger: #DC2626;
    --tb-warm: #D97706;
    --tb-warm-soft: rgba(217, 119, 6, 0.08);
    --tb-shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.06), 0 1px 3px rgba(28, 25, 23, 0.04);
    --tb-shadow-md: 0 4px 12px rgba(28, 25, 23, 0.08), 0 2px 4px rgba(28, 25, 23, 0.04);
    --tb-shadow-glow: 0 0 0 3px rgba(8, 145, 178, 0.18);
    --color-primary-rgb: 8, 145, 178;
    --text-strong: #1C1917;
    --text-default: #1C1917;
    --text-secondary: #57534E;
    --text-subtle: #A8A29E;
    --border-soft: #E7E5E4;
    --border-default: #E7E5E4;
    --border-strong: #D6D3D1;
    --tb-panel-bg: #FFFFFF;
    --tb-panel-bg-muted: #F5F3EF;
    --tb-panel-text: #1C1917;
    --tb-panel-text-muted: #78716C;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        color-scheme: dark;
        --tb-bg: #0F1419;
        --tb-surface: #1A2332;
        --tb-surface-2: #243044;
        --tb-primary: #22D3EE;
        --tb-primary-hover: #67E8F9;
        --tb-accent: #2DD4BF;
        --tb-text: #F1F5F9;
        --tb-muted: #94A3B8;
        --tb-border: #334155;
        --tb-success: #34D399;
        --tb-warning: #FBBF24;
        --tb-danger: #F87171;
        --tb-warm: #FBBF24;
        --tb-warm-soft: rgba(251, 191, 36, 0.12);
        --tb-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
        --tb-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
        --tb-shadow-glow: 0 0 0 3px rgba(34, 211, 238, 0.22);
        --color-primary-rgb: 34, 211, 238;
        --text-strong: #F8FAFC;
        --text-default: #F1F5F9;
        --text-secondary: #CBD5E1;
        --text-subtle: #94A3B8;
        --border-soft: rgba(148, 163, 184, 0.12);
        --border-default: rgba(148, 163, 184, 0.2);
        --border-strong: rgba(148, 163, 184, 0.32);
        --tb-panel-bg: #1A2332;
        --tb-panel-bg-muted: #243044;
        --tb-panel-text: #F1F5F9;
        --tb-panel-text-muted: #94A3B8;
    }
}

html[data-theme="dark"] {
    color-scheme: dark;
    --tb-bg: #0F1419;
    --tb-surface: #1A2332;
    --tb-surface-2: #243044;
    --tb-primary: #22D3EE;
    --tb-primary-hover: #67E8F9;
    --tb-accent: #2DD4BF;
    --tb-text: #F1F5F9;
    --tb-muted: #94A3B8;
    --tb-border: #334155;
    --tb-success: #34D399;
    --tb-warning: #FBBF24;
    --tb-danger: #F87171;
    --tb-warm: #FBBF24;
    --tb-warm-soft: rgba(251, 191, 36, 0.12);
    --tb-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --tb-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --tb-shadow-glow: 0 0 0 3px rgba(34, 211, 238, 0.22);
    --color-primary-rgb: 34, 211, 238;
    --text-strong: #F8FAFC;
    --text-default: #F1F5F9;
    --text-secondary: #CBD5E1;
    --text-subtle: #94A3B8;
    --border-soft: rgba(148, 163, 184, 0.12);
    --border-default: rgba(148, 163, 184, 0.2);
    --border-strong: rgba(148, 163, 184, 0.32);
    --tb-panel-bg: #1A2332;
    --tb-panel-bg-muted: #243044;
    --tb-panel-text: #F1F5F9;
    --tb-panel-text-muted: #94A3B8;
}

/* Re-map legacy aliases when theme tokens change */
html[data-theme="light"],
html[data-theme="dark"] {
    --color-bg: var(--tb-bg);
    --color-surface: var(--tb-surface);
    --color-surface-elevated: var(--tb-surface-2);
    --color-primary: var(--tb-primary);
    --color-primary-hover: var(--tb-primary-hover);
    --color-secondary: var(--tb-accent);
    --color-text: var(--tb-text);
    --color-muted: var(--tb-muted);
    --color-border: var(--tb-border);
    --color-success: var(--tb-success);
    --color-warning: var(--tb-warning);
    --color-error: var(--tb-danger);
    --bg: var(--color-bg);
    --surface: var(--color-surface-elevated);
    --text: var(--color-text);
    --muted: var(--color-muted);
    --accent: var(--color-primary);
    --border: var(--color-border);
    --accent-primary: var(--tb-primary);
    --accent-warm: var(--tb-warm);
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        --color-bg: var(--tb-bg);
        --color-surface: var(--tb-surface);
        --color-surface-elevated: var(--tb-surface-2);
        --color-primary: var(--tb-primary);
        --color-primary-hover: var(--tb-primary-hover);
        --color-secondary: var(--tb-accent);
        --color-text: var(--tb-text);
        --color-muted: var(--tb-muted);
        --color-border: var(--tb-border);
        --color-success: var(--tb-success);
        --color-warning: var(--tb-warning);
        --color-error: var(--tb-danger);
        --bg: var(--color-bg);
        --surface: var(--color-surface-elevated);
        --text: var(--color-text);
        --muted: var(--color-muted);
        --accent: var(--color-primary);
        --border: var(--color-border);
        --accent-primary: var(--tb-primary);
        --accent-warm: var(--tb-warm);
    }
}

/* Logo variants */
.tapbios-logo--on-dark {
    display: none;
}

.tapbios-logo--on-light {
    display: block;
}

.tapbios-logo--adaptive {
    display: block;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .tapbios-logo--on-light {
        display: none;
    }

    html:not([data-theme="light"]) .tapbios-logo--on-dark {
        display: block;
    }

    html:not([data-theme="light"]) .tapbios-logo--adaptive {
        filter: brightness(0) saturate(100%) invert(1);
    }
}

html[data-theme="dark"] .tapbios-logo--on-light {
    display: none;
}

html[data-theme="dark"] .tapbios-logo--on-dark {
    display: block;
}

html[data-theme="dark"] .tapbios-logo--adaptive {
    filter: brightness(0) saturate(100%) invert(1);
}

html[data-theme="light"] .tapbios-logo--on-light {
    display: block;
}

html[data-theme="light"] .tapbios-logo--on-dark {
    display: none;
}

html[data-theme="light"] .tapbios-logo--adaptive {
    filter: none;
}

/* Dark mode alert tweaks */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .alert-error {
        background: rgba(127, 29, 29, 0.35);
        border-color: rgba(248, 113, 113, 0.35);
        color: #FECACA;
    }

    html:not([data-theme="light"]) .alert-success {
        background: rgba(6, 78, 59, 0.35);
        border-color: rgba(52, 211, 153, 0.35);
        color: #A7F3D0;
    }

    html:not([data-theme="light"]) .alert-warning {
        background: rgba(120, 53, 15, 0.35);
        border-color: rgba(251, 191, 36, 0.35);
        color: #FDE68A;
    }
}

html[data-theme="dark"] .alert-error {
    background: rgba(127, 29, 29, 0.35);
    border-color: rgba(248, 113, 113, 0.35);
    color: #FECACA;
}

html[data-theme="dark"] .alert-success {
    background: rgba(6, 78, 59, 0.35);
    border-color: rgba(52, 211, 153, 0.35);
    color: #A7F3D0;
}

html[data-theme="dark"] .alert-warning {
    background: rgba(120, 53, 15, 0.35);
    border-color: rgba(251, 191, 36, 0.35);
    color: #FDE68A;
}

/* Theme preference control */
.theme-preference {
    display: grid;
    gap: 0.35rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}

.theme-preference label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
}

.theme-preference select {
    width: 100%;
    min-height: 2.25rem;
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--tb-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 0.8125rem;
}

.theme-preference--inline {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* Circular sun/moon theme toggle */
.theme-toggle {
    --theme-toggle-size: 2.5rem;
    --theme-toggle-ring: var(--color-border);
    --theme-toggle-icon: #4A403A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--theme-toggle-size);
    height: var(--theme-toggle-size);
    padding: 0;
    border: 1px solid var(--theme-toggle-ring);
    border-radius: 50%;
    background: var(--tb-surface);
    color: var(--theme-toggle-icon);
    cursor: pointer;
    flex-shrink: 0;
}

.theme-toggle__icon {
    width: 1.125rem;
    height: 1.125rem;
}

.theme-toggle__icon--sun {
    display: none;
}

.theme-toggle__icon--moon {
    display: block;
}

.theme-toggle[data-theme-resolved="dark"] {
    --theme-toggle-ring: #C5A069;
    --theme-toggle-icon: #C5A069;
    background: transparent;
    border-width: 2px;
}

.theme-toggle[data-theme-resolved="dark"] .theme-toggle__icon--sun {
    display: block;
}

.theme-toggle[data-theme-resolved="dark"] .theme-toggle__icon--moon {
    display: none;
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

html[data-theme="dark"] .site-header {
    background: var(--tb-surface);
    border-bottom-color: var(--border-default);
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .site-header {
        background: var(--tb-surface);
        border-bottom-color: var(--border-default);
    }

    html:not([data-theme="light"]) .site-footer {
        background: var(--tb-surface);
    }
}

html[data-theme="dark"] .site-footer {
    background: var(--tb-surface);
}