:root{
  --bg:#111512; --panel:#161b17; --panel2:#0d100e; --line:#2a322b;
  --text:#f2f0e8; --muted:#8b948c; --dim:#4a554b;
  --brass:#e8b13c; --brass-ink:#111512; --brass-tint:#1b1f15;
}
html.light{
  --bg:#f0ede3; --panel:#f7f5ec; --panel2:#e8e4d6; --line:#d5cfbc;
  --text:#1c231d; --muted:#5f675e; --dim:#a9a390;
  --brass:#96690e; --brass-ink:#f7f5ec; --brass-tint:#ebe1c2;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Archivo',system-ui,sans-serif;
  transition:background .35s ease,color .35s ease;
}
a{color:var(--muted);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--brass)}

/* theme toggle button hover (was a DC `style-hover` in the design export) */
.theme-toggle{transition:border-color .2s ease,color .2s ease}
.theme-toggle:hover{border-color:var(--brass);color:var(--brass)}

@keyframes focusIn{from{filter:blur(7px);opacity:.55}to{filter:blur(0);opacity:1}}
@keyframes focusHunt{0%,100%{filter:blur(0)}45%{filter:blur(0)}55%{filter:blur(3.5px)}65%{filter:blur(0)}}
@keyframes ringSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes blinkDot{0%,100%{opacity:1}50%{opacity:.15}}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important}
}