/* =====================================================
   THEME SYSTEM — assets/css/themes.css
   Include this in every page via <link> tag
   ===================================================== */

/* ── DARK (default) ── */
[data-theme="dark"] {
    --bg:      #080c10;
    --panel:   #0d1117;
    --panel2:  #111820;
    --border:  #1c2a3a;
    --accent:  #00e5a0;
    --accent2: #0095ff;
    --warn:    #f0b429;
    --danger:  #ff4560;
    --text:    #c9d6e3;
    --muted:   #4a5f74;
    --grid-color: rgba(0,229,160,0.03);
}

/* ── LIGHT ── */
[data-theme="light"] {
    --bg:      #f0f4f8;
    --panel:   #ffffff;
    --panel2:  #e8edf2;
    --border:  #d0dae4;
    --accent:  #00a870;
    --accent2: #0070cc;
    --warn:    #d49000;
    --danger:  #d63050;
    --text:    #1a2a3a;
    --muted:   #7a90a4;
    --grid-color: rgba(0,120,80,0.04);
}

/* ── MIDNIGHT ── */
[data-theme="midnight"] {
    --bg:      #0a0a1a;
    --panel:   #10102a;
    --panel2:  #15153a;
    --border:  #2a2a50;
    --accent:  #a78bfa;
    --accent2: #38bdf8;
    --warn:    #fbbf24;
    --danger:  #f87171;
    --text:    #ddd6fe;
    --muted:   #6b7280;
    --grid-color: rgba(167,139,250,0.04);
}

/* ── SOLARIZED ── */
[data-theme="solarized"] {
    --bg:      #002b36;
    --panel:   #073642;
    --panel2:  #0d4555;
    --border:  #1a5566;
    --accent:  #2aa198;
    --accent2: #268bd2;
    --warn:    #b58900;
    --danger:  #dc322f;
    --text:    #839496;
    --muted:   #586e75;
    --grid-color: rgba(42,161,152,0.04);
}

/* ── Smooth transitions on theme switch ── */
*, *::before, *::after {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease;
}

/* ── Theme Switcher Widget ── */
.theme-switcher {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 4px 6px;
}

.theme-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.15s;
    position: relative;
}
.theme-btn:hover      { transform: scale(1.15); }
.theme-btn.active     { border-color: var(--accent); }

.theme-btn[data-t="dark"]      { background: #080c10; box-shadow: inset 0 0 0 1px #1c2a3a; }
.theme-btn[data-t="light"]     { background: #f0f4f8; box-shadow: inset 0 0 0 1px #d0dae4; }
.theme-btn[data-t="midnight"]  { background: linear-gradient(135deg, #0a0a1a, #a78bfa44); box-shadow: inset 0 0 0 1px #2a2a50; }
.theme-btn[data-t="solarized"] { background: #002b36; box-shadow: inset 0 0 0 1px #2aa198; }

.theme-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 1px;
    text-transform: uppercase;
    padding-right: 4px;
}