/* *********************************************
   GLOBAL THEME VARIABLES
********************************************** */
:root {
    --accent: #4da3ff;

    /* Button contrast */
    --btn-bg-dark: #2a2a2a;
    --btn-text-dark: #ffffff;

    --btn-bg-light: #e5e7eb;
    --btn-text-light: #111827;

    /* Active tab backgrounds */
    --tab-active-dark: rgba(255,255,255,0.12);
    --tab-active-light: rgba(0,0,0,0.10);
}

/* *********************************************
   THEME TOGGLE BUTTON
********************************************** */
#themeToggle {
    background: var(--btn-bg-dark);
    color: var(--btn-text-dark);
    border: 1px solid rgba(255,255,255,0.25);
    transition: background 0.2s ease, color 0.2s ease, border 0.2s ease;
}

body.theme-light #themeToggle {
    background: var(--btn-bg-light);
    color: var(--btn-text-light);
    border: 1px solid rgba(0,0,0,0.25);
}

/* *********************************************
   ACTIVE TAB COLORS
********************************************** */
body.theme-dark .nav-tab.active {
    background: var(--tab-active-dark);
    color: #fff;
}

body.theme-light .nav-tab.active {
    background: var(--tab-active-light);
    color: #111827;
}

/* *********************************************
   DARK THEME
********************************************** */
body.theme-dark {
    --bg: #020617;
    --bg-alt: #020617;
    --fg: #f9fafb;
    --muted: #94a3b8;
    --border: rgba(148,163,184,0.35);
    background: radial-gradient(circle at top, #111827 0, #020617 55%, #000 100%);
}

/* *********************************************
   LIGHT THEME
********************************************** */
body.theme-light {
    --bg: #f5f7fa;
    --bg-alt: #ffffff;
    --fg: #000000;
    --muted: #4b5563;
    --border: #d1d5db;

    --btn-bg: #e5e7eb;
    --btn-text: #111827;

    --tab-active: rgba(0,0,0,0.10);

    background: radial-gradient(circle at top, #e5e7eb 0, #ffffff 40%, #e5e7eb 100%);
}

/* *********************************************
   LIGHT THEME PANEL + COMPONENT OVERRIDES
********************************************** */
body.theme-light .tab-panel {
    background: radial-gradient(circle at top left, rgba(79, 140, 255, 0.08), transparent 55%),
                radial-gradient(circle at bottom right, rgba(236, 72, 153, 0.08), transparent 55%),
                #ffffff;
    border-color: rgba(148, 163, 184, 0.4);
}

body.theme-light .timer-display {
    background: #f9fafb;
    border-color: rgba(148, 163, 184, 0.6);
}

body.theme-light .reaction-area.idle {
    background: #f9fafb;
}

/* Buttons */
body.theme-light .primary-btn {
    background: var(--accent);
    color: #ffffff;
}

body.theme-light .ghost-btn {
    background: var(--btn-bg-light);
    color: var(--btn-text-light);
    border: 1px solid var(--border);
}

/* *********************************************
   AMOLED THEME (true black)
********************************************** */
body.theme-amoled {
    --bg: #000000;
    --bg-alt: #000000;
    --fg: #ffffff;
    --muted: #9ca3af;
    --border: #1f2937;

    --btn-bg: #111111;
    --btn-text: #ffffff;

    --tab-active: rgba(255,255,255,0.12);

    background: #000000;
}

/* AMOLED component overrides */
body.theme-amoled .tab-panel {
    background: #000000;
    border-color: #1f2937;
}

body.theme-amoled .timer-display {
    background: #000000;
    border-color: #1f2937;
}

body.theme-amoled .reaction-area.idle {
    background: #000000;
}

/* *********************************************
   SOLARIZED LIGHT THEME
********************************************** */
body.theme-solarized {
    --bg: #fdf6e3;
    --bg-alt: #fefcf2;
    --fg: #073642;
    --muted: #586e75;
    --border: #eee8d5;

    --btn-bg: #eee8d5;
    --btn-text: #073642;

    --tab-active: rgba(0,0,0,0.12);

    background: #fdf6e3;
}

/* Solarized component overrides */
body.theme-solarized .tab-panel {
    background: #fefcf2;
    border-color: #eee8d5;
}

body.theme-solarized .timer-display {
    background: #fefcf2;
    border-color: #e2dcc7;
}

body.theme-solarized .reaction-area.idle {
    background: #fefcf2;
}

/* *********************************************
   APPLE FROST THEME
********************************************** */
body.theme-frost {
    --bg: rgba(255,255,255,0.55);
    --bg-alt: rgba(255,255,255,0.65);
    --fg: #1c1c1e;
    --muted: #6e6e73;
    --border: rgba(255,255,255,0.35);

    --btn-bg: rgba(255,255,255,0.35);
    --btn-text: #1c1c1e;

    --tab-active: rgba(255,255,255,0.35);

    backdrop-filter: blur(22px);
    background: rgba(255,255,255,0.55);
}

/* Frost component overrides */
body.theme-frost .tab-panel {
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(22px);
    border-color: rgba(255,255,255,0.35);
}

body.theme-frost .timer-display {
    background: rgba(255,255,255,0.45);
    border-color: rgba(255,255,255,0.35);
}

body.theme-frost .reaction-area.idle {
    background: rgba(255,255,255,0.45);
}