/* theme.css — the shared palette for both themes.

   Every colour is declared once with light-dark(); which half is used is
   decided by the `color-scheme` of :root. With no data-theme attribute the
   root keeps `light dark`, so the browser follows the system preference;
   theme.js sets data-theme once the user picks a side explicitly. */

:root {
    color-scheme: light dark;

    --bg:     light-dark(#e8e8e6, #0a0a0a);
    --bg2:    light-dark(#f6f6f4, #0e0e0e);
    --bg3:    light-dark(#ffffff, #111111);
    --border: light-dark(#d4d4d0, #1a1a1a);
    --border-hover: light-dark(#a8a8a4, #333333);
    --text:   light-dark(#333333, #c8c8c8);
    --text-dim:  light-dark(#888888, #555555);
    --text-dimmer: light-dark(#b8b8b4, #333333);
    --text-bright: light-dark(#000000, #ffffff);
    --accent: light-dark(#666666, #888888);

    /* ─── Semantic state colours ─── */
    --ok:  light-dark(#2e7d32, #80b380);
    --err: light-dark(#b3261e, #cc8080);
    --err-text:   light-dark(#b3261e, #cc7777);
    --err-border: light-dark(#e3b6b2, #4a1a1a);
    --err-border-soft: light-dark(#ecc8c4, #3a1a1a);
    --err-bg: light-dark(#fbf1f0, #100808);

    /* ─── Destructive controls ─── */
    --danger: light-dark(#b3261e, #aa6666);
    --danger-border: light-dark(#e3c2be, #3a2020);
    --danger-hover: light-dark(#7f1d1a, #ff8888);
    --danger-hover-border: light-dark(#c07a74, #884444);
    --danger-bg: light-dark(#fbeeec, #1a0a0a);

    /* ─── Overlays & translucent surfaces ─── */
    --overlay: light-dark(rgba(232, 232, 230, 0.85), rgba(0, 0, 0, 0.85));
    --panel:  light-dark(rgba(246, 246, 244, 0.9), rgba(14, 14, 14, 0.85));
    --panel2: light-dark(rgba(255, 255, 255, 0.82), rgba(12, 12, 12, 0.75));
    --glass:  light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.06));
    --glass-border: light-dark(rgba(0, 0, 0, 0.18), rgba(255, 255, 255, 0.25));
    --glass-border-soft: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.12));
    --glass-border-strong: light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.5));
    --shadow: light-dark(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.5));
    --glow: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.05));
    --scrim-top: light-dark(rgba(255, 255, 255, 0.86), rgba(0, 0, 0, 0.85));
    --scrim-bottom: light-dark(rgba(255, 255, 255, 0.76), rgba(0, 0, 0, 0.75));

    --font: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono',
            'Codelia', 'Iosevka', Consolas, 'Liberation Mono', monospace;
    --radius: 8px;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* ─── Theme toggle ─── */
.theme-toggle {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 9999;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-dim);
    font-family: var(--font);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.theme-toggle:hover {
    background: var(--bg3);
    border-color: var(--border-hover);
    color: var(--text-bright);
}

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

/* icon: sun in dark theme (click -> light), moon in light theme */
.theme-toggle .tt-moon { display: none; }

:root[data-theme="light"] .theme-toggle .tt-sun  { display: none; }
:root[data-theme="light"] .theme-toggle .tt-moon { display: inline; }

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .theme-toggle .tt-sun  { display: none; }
    :root:not([data-theme="dark"]) .theme-toggle .tt-moon { display: inline; }
}