/* ai.heart — theme.css
 * The light/dark surface. One file, one link, no build step.
 *
 * Contract, matching what aloud.css and console.css already expect:
 *   :root[data-theme="light"]  — forced light
 *   :root[data-theme="dark"]   — forced dark
 *   (neither)                  — follow the operating system
 *
 * Design rules this file keeps, deliberately (2026-08-04, HK):
 *   · Nothing animates on a theme change. A cross-fade between palettes
 *     reads as the page glitching. The swap is instant.
 *   · Nothing on this surface loops. Motion happens in response to a
 *     press and then stops.
 *   · Dark is not black and light is not white. Both sit off the extremes
 *     so a long read does not glare.
 */

/* ── dark: the house default ──────────────────────────────────────────── */
:root,
:root[data-theme="dark"] {
  --bg:        #0A0F1A;
  --bg-raised: #0F1726;
  --panel:     #101A2C;
  --txt:       #E8E6DF;
  --mut:       rgba(232, 230, 223, 0.62);
  --faint:     rgba(232, 230, 223, 0.38);
  --line:      rgba(212, 168, 83, 0.22);
  --acc:       #D4A853;
  --acc-hi:    #E9C46A;
  --sel:       rgba(212, 168, 83, 0.24);
  color-scheme: dark;
}

/* ── light: warm paper, not white ─────────────────────────────────────── */
:root[data-theme="light"] {
  --bg:        #FAF7F0;
  --bg-raised: #FFFDF8;
  --panel:     #FFFDF8;
  --txt:       #1A1F2B;
  --mut:       rgba(26, 31, 43, 0.68);
  --faint:     rgba(26, 31, 43, 0.45);
  --line:      rgba(140, 105, 30, 0.24);
  --acc:       #8A6520;
  --acc-hi:    #A87C2A;
  --sel:       rgba(212, 168, 83, 0.30);
  color-scheme: light;
}

/* Auto mode — the same light values, applied only when the OS asks for
   light AND the reader has not pinned a choice. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    --bg:        #FAF7F0;
    --bg-raised: #FFFDF8;
    --panel:     #FFFDF8;
    --txt:       #1A1F2B;
    --mut:       rgba(26, 31, 43, 0.68);
    --faint:     rgba(26, 31, 43, 0.45);
    --line:      rgba(140, 105, 30, 0.24);
    --acc:       #8A6520;
    --acc-hi:    #A87C2A;
    --sel:       rgba(212, 168, 83, 0.30);
    color-scheme: light;
  }
}

body {
  background: var(--bg);
  color: var(--txt);
}

::selection {
  background: var(--sel);
  color: var(--txt);
}

/* ── the control ──────────────────────────────────────────────────────
   Three states in one button: auto → light → dark → auto. One glyph,
   one label, no dropdown to open and no menu to lose your place in.
   It does not move, it does not pulse, and it does not appear on hover. */
.aih-theme {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--mut);
  font: 500 13px/1 var(--sans, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif);
  cursor: pointer;
  /* colour only — never transform. A control that grows under the cursor
     is a control that moves when you are trying to read past it. */
  transition: color .12s ease, border-color .12s ease;
}

.aih-theme:hover {
  color: var(--txt);
  border-color: var(--acc);
}

.aih-theme:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
}

.aih-theme .aih-theme-ico {
  width: 15px;
  height: 15px;
  flex: none;
  display: block;
}

/* The label is the honest part: it names the state you are IN, so the
   button never has to be pressed to find out what it is doing. */
.aih-theme .aih-theme-txt {
  letter-spacing: .01em;
  white-space: nowrap;
}

@media print {
  .aih-theme { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .aih-theme { transition: none; }
}