/* ── Magellan shared theme ──────────────────────────────────────────────
   Light/dark color variables + floating audio & theme controls.
   Included on index.html, philosophy.html and lp.html.               */

:root,
:root[data-theme="light"] {
    --bg: #ffffff;
    --surface: #ffffff;
    --text: #000000;
    --text-muted: #555555;
    --text-faint: #999999;
    --accent: #2e5e4e;
    --accent-hover: #3a6b5a;
    --accent-soft-bg: #eef5f2;
    --border: #dddddd;
    --border-soft: #eeeeee;
    --border-fainter: #f0f0f0;
    --input-border: #cccccc;
    --on-accent: #ffffff;
    --status-seen-text: #777777;
    --status-seen-border: #bbbbbb;
    --status-seen-bg: #f5f5f5;
    --btn-outline-hover: #f5f5f5;
    --error: #aa3333;
    --control-shadow: rgba(0, 0, 0, 0.12);
}

:root[data-theme="dark"] {
    --bg: #121212;
    --surface: #1b1b1b;
    --text: #e8e8e8;
    --text-muted: #b0b0b0;
    --text-faint: #808080;
    --accent: #6fae97;
    --accent-hover: #8ac3ad;
    --accent-soft-bg: #17241f;
    --border: #333333;
    --border-soft: #2a2a2a;
    --border-fainter: #242424;
    --input-border: #444444;
    --on-accent: #10201a;
    --status-seen-text: #999999;
    --status-seen-border: #555555;
    --status-seen-bg: #262626;
    --btn-outline-hover: #262626;
    --error: #e07a7a;
    --control-shadow: rgba(0, 0, 0, 0.6);
}

html {
    color-scheme: light dark;
}

/* Smooth the flip between modes */
body {
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* Clean, un-underlined links — underline only on hover as a subtle cue */
a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* ── Floating controls ── */
.site-control {
    position: fixed;
    bottom: 20px;
    width: 44px;
    height: 44px;
    border: none;
    background: none;
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    z-index: 1000;
    transition: color 0.2s ease, transform 0.15s ease;
}
.site-control:hover {
    color: var(--accent-hover);
    transform: translateY(-1px);
}
.site-control svg {
    width: 20px;
    height: 20px;
    display: block;
}
#themeControl {
    right: 20px;
}