*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Hide body until JS boot completes to prevent layout-shift flashes */
body { opacity: 0; }
body.ready { opacity: 1; transition: opacity .12s ease-in; }

:root {
  --radius: 10px;
}

/* Dark theme (default) */
[data-theme="dark"] {
  --bg:        #3d3028;
  --surface:   #4a3c32;
  --surface2:  #57483c;
  --border:    #6b5a4c;
  --border2:   #7e6c5c;
  --accent:    #d2bba0;
  --accent-dim:#9f7e69;
  --text:      #ffeee2;
  --text-sub:  #f2efc7;
  --muted:     #b8a898;
  --danger:    #e08060;
  --overlay:   #3d3028cc;
  --dim-text:  #8a7868;
}

/* Light theme */
[data-theme="light"] {
  --bg:        #f7ffe0;
  --surface:   #ffeee2;
  --surface2:  #f2efc7;
  --border:    #d2bba0;
  --border2:   #c4a88a;
  --accent:    #9f7e69;
  --accent-dim:#c8ad96;
  --text:      #2a2018;
  --text-sub:  #3d2e20;
  --muted:     #7a6a5a;
  --danger:    #b04530;
  --overlay:   #f7ffe0cc;
  --dim-text:  #b0a080;
}