/* Penvola brand: palette and type from the brand book (v0.1, October 2026).
   Three themes like the product: Light (cream), Dark (warm), Mariana (deep navy).
   The theme follows the system until the reader picks one; theme.js sets data-theme on <html>.
   Token names are shared with the player template, so the player follows the brand too. */
:root, :root[data-theme="light"] {
  --bg: #FEFCF5; --panel: #FFFEFA; --ink: #111111; --muted: #5F5E59; --faint: #A8A29E; --line: #E7E5E4;
  --accent: #3E5C78; --accent-ink: #FFFEFA; --accent-soft: #FBF3CE; --hl: #FBF3CE; --code: #F6F2E7;
  --sun: #E9A432; --halo: #FBF3CE; --feather: #9FC1D6;
  --ok: #2F6B46; --bad: #B4321F; --q: #8A6410;
  --p0: #B4321F; --p1: #9A6512; --p2: #8A8780;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #201F1B; --panel: #29281F; --ink: #F3EFE6; --muted: #A8A29E; --faint: #7A766F; --line: #3A3833;
    --accent: #E9A432; --accent-ink: #201F1B; --accent-soft: #3A3420; --hl: #3D3622; --code: #2C2B25;
    --sun: #E9A432; --halo: #FBF3CE; --feather: #CFE0EB;
    --ok: #6CC08B; --bad: #F2857A; --q: #E2C24D;
    --p0: #F2857A; --p1: #E9A432; --p2: #A8A29E;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #201F1B; --panel: #29281F; --ink: #F3EFE6; --muted: #A8A29E; --faint: #7A766F; --line: #3A3833;
  --accent: #E9A432; --accent-ink: #201F1B; --accent-soft: #3A3420; --hl: #3D3622; --code: #2C2B25;
  --sun: #E9A432; --halo: #FBF3CE; --feather: #CFE0EB;
  --ok: #6CC08B; --bad: #F2857A; --q: #E2C24D;
  --p0: #F2857A; --p1: #E9A432; --p2: #A8A29E;
  color-scheme: dark;
}
:root[data-theme="mariana"] {
  --bg: #0A111A; --panel: #0F1823; --ink: #E9EEF3; --muted: #7FA6C8; --faint: #4F6B85; --line: #1C2A39;
  --accent: #E9A432; --accent-ink: #0A111A; --accent-soft: #15222F; --hl: #1B2C3D; --code: #111C28;
  --sun: #E9A432; --halo: #FBF3CE; --feather: #CFE0EB;
  --ok: #6CC08B; --bad: #F2857A; --q: #E2C24D;
  --p0: #F2857A; --p1: #E9A432; --p2: #7FA6C8;
  color-scheme: dark;
}

body { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-feature-settings: "cv11", "ss01"; }

/* the logo comes in three versions; show the one for the theme */
.logo { display: inline-flex; align-items: center; }
.logo img { height: 32px; width: auto; display: none; }
.logo img.l-light { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .logo img.l-light { display: none; }
  :root:not([data-theme]) .logo img.l-dark { display: block; }
}
:root[data-theme="dark"] .logo img.l-light, :root[data-theme="mariana"] .logo img.l-light { display: none; }
:root[data-theme="dark"] .logo img.l-dark { display: block; }
:root[data-theme="mariana"] .logo img.l-mariana { display: block; }

/* theme switch, like the brand book */
.themes { display: inline-flex; gap: 2px; }
.themes button { font: inherit; font-size: 12px; padding: 3px 9px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.themes button.on { border-color: var(--line); color: var(--ink); background: var(--panel); }
.themes button:hover { color: var(--ink); }