/* ═══════════════════════════════════════════════════════════════
   RESET & VARIABLES — CSS custom properties, reset, body defaults
   ═══════════════════════════════════════════════════════════════ */

  *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
  :root{
    --cream:#FAF6F0;--cream-dark:#F0EBE3;--brown:#513728;--brown-light:#6B4D40;
    --brown-dark:#35201A;--accent:#7A3A10;--accent-light:#904920;
    --gold:#9E7A3C;--gold-light:#B89868;
    --text:#35201A;--text-light:#5C3D2E;--text-muted:#7D5F50;
    --border:#D7CCC8;--border-light:#EFEBE9;
    --white:#FFFFFF;--shadow:rgba(62,39,35,.12);
    --sans:'Segoe UI',system-ui,-apple-system,sans-serif;
    --serif:'Georgia','Times New Roman',serif;
    --mono:'Consolas','Courier New',monospace;
    --sidebar-w:266px;
  }
  html,body{height:100%;overflow:hidden;font-family:var(--sans);background:var(--cream);color:var(--text)}

  /* Global scrollbar theme — matches Mira's brown/cream palette.
     Applies to every scrollable element that doesn't set its own
     webkit-scrollbar rules. Firefox uses `scrollbar-color` on `*`;
     WebKit/Blink picks up the `::-webkit-scrollbar-*` pseudos. */
  *{scrollbar-color:var(--gold-light) var(--cream-dark);scrollbar-width:thin}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:var(--cream-dark)}
  ::-webkit-scrollbar-thumb{background:var(--gold-light);border-radius:5px;border:2px solid var(--cream-dark)}
  ::-webkit-scrollbar-thumb:hover{background:var(--gold)}
  ::-webkit-scrollbar-corner{background:var(--cream-dark)}