/* ==== theme + font chooser ==== */

/* Themes swap all core tokens */
html[data-theme="dark"]{
  --ink:#e8e2d4;--ink-2:#b8ad9a;--ink-3:#8a7f6d;
  --paper:#181410;--paper-2:#241d17;--card:#1f1913;
  --accent:#e07845;--accent-ink:#f0956a;--wash:#3a2418;
  --line:#3a3126;
}
html[data-theme="sepia"]{
  --ink:#3a2a18;--ink-2:#6b5238;--ink-3:#8a7458;
  --paper:#f4ead4;--paper-2:#ede0be;--card:#faf3e0;
  --accent:#a5471a;--accent-ink:#6e2e0e;--wash:#efdcb8;
  --line:#c8b48b;
}
html[data-theme="hc"]{
  --ink:#000;--ink-2:#111;--ink-3:#333;
  --paper:#fff;--paper-2:#f2f2f2;--card:#fff;
  --accent:#a00;--accent-ink:#600;--wash:#ffe4d4;
  --line:#000;
}
html[data-theme="dark"] img.portrait, html[data-theme="dark"] .portrait img{filter:brightness(.92) contrast(1.05)}
html[data-theme="hc"] *{text-shadow:none!important}
html[data-theme="hc"] .card, html[data-theme="hc"] section{border-width:2px}

/* Font packs */
html[data-font="modern"]{--serif:'Inter','Helvetica Neue',sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;--sans:'Inter',system-ui,sans-serif}
html[data-font="classic"]{--serif:Georgia,'Times New Roman',serif;--mono:Menlo,'Courier New',monospace;--sans:'Helvetica Neue',Arial,sans-serif}
html[data-font="editorial"]{--serif:'EB Garamond','Cormorant Garamond',Georgia,serif;--mono:'IBM Plex Mono',ui-monospace,monospace;--sans:'IBM Plex Sans',system-ui,sans-serif}
html[data-font="mono"]{--serif:'JetBrains Mono',ui-monospace,monospace;--mono:'JetBrains Mono',ui-monospace,monospace;--sans:'JetBrains Mono',ui-monospace,monospace}

/* Font size scale — zoom body so hardcoded px sizes rescale */
html[data-scale="s"] body{zoom:.88}
html[data-scale="l"] body{zoom:1.15}
html[data-scale="xl"] body{zoom:1.3}
/* Firefox fallback (older FF ignored zoom until 126; still safe) */
@supports not (zoom: 1){
  html[data-scale="s"] body{transform:scale(.88);transform-origin:top left;width:113.6%}
  html[data-scale="l"] body{transform:scale(1.15);transform-origin:top left;width:86.9%}
  html[data-scale="xl"] body{transform:scale(1.3);transform-origin:top left;width:76.9%}
}

/* Chooser floating button */
.pref-fab{position:fixed;right:20px;bottom:20px;width:48px;height:48px;border-radius:50%;background:var(--card);border:1px solid var(--line);color:var(--ink);cursor:pointer;z-index:1000;box-shadow:0 8px 24px -8px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;font-size:20px;transition:transform .2s,box-shadow .2s}
.pref-fab:hover{transform:scale(1.08);box-shadow:0 12px 32px -8px rgba(0,0,0,.35)}
.pref-fab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}

.pref-panel{position:fixed;right:20px;bottom:80px;width:280px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:0 20px 60px -10px rgba(0,0,0,.3);z-index:1000;display:none;font-family:var(--sans);font-size:13px;color:var(--ink)}
.pref-panel.open{display:block;animation:prefIn .25s cubic-bezier(.2,.9,.3,1)}
@keyframes prefIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pref-panel h4{margin:0 0 8px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.pref-panel h4:not(:first-child){margin-top:14px}
.pref-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pref-row button{padding:8px 4px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:6px;cursor:pointer;font-size:11px;font-family:var(--mono);transition:all .15s}
.pref-row button:hover{border-color:var(--accent);background:var(--wash)}
.pref-row button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.pref-row.themes button{aspect-ratio:1;position:relative;overflow:hidden;font-size:0;padding:0}
.pref-row.themes button::before{content:"";position:absolute;inset:0}
.pref-row.themes button[data-v="light"]::before{background:linear-gradient(135deg,#f5f0e6 50%,#b8410e 50%)}
.pref-row.themes button[data-v="dark"]::before{background:linear-gradient(135deg,#181410 50%,#e07845 50%)}
.pref-row.themes button[data-v="sepia"]::before{background:linear-gradient(135deg,#f4ead4 50%,#a5471a 50%)}
.pref-row.themes button[data-v="hc"]::before{background:linear-gradient(135deg,#fff 50%,#a00 50%)}
.pref-row.themes button.on{outline:2px solid var(--accent);outline-offset:2px}
.pref-close{position:absolute;top:8px;right:10px;background:none;border:none;font-size:18px;line-height:1;color:var(--ink-3);cursor:pointer;padding:4px}
.pref-close:hover{color:var(--ink)}
.pref-reset{display:block;width:100%;margin-top:14px;padding:8px;background:none;border:1px dashed var(--line);color:var(--ink-3);cursor:pointer;border-radius:6px;font-family:var(--mono);font-size:11px}
.pref-reset:hover{color:var(--accent);border-color:var(--accent)}

@media (max-width:600px){.pref-panel{right:10px;left:10px;width:auto;bottom:76px}.pref-fab{right:14px;bottom:14px}}