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

:root {
  --bg:             #F7F6F2;
  --surface:        #FFFFFF;
  --border:         #E8E4DC;
  --sidebar-bg:     #2C4A35;
  --sidebar-hover:  #3A5E44;
  --sidebar-active: #4E7A5A;
  --green:          #4E7A5A;
  --green-light:    #EAF2EC;
  --brown:          #7A4F2E;
  --brown-light:    #F5EDE5;
  --text:           #1E2420;
  --text-muted:     #7A857E;
  --text-sidebar:   #C8D8CC;
  --radius:         8px;
  --shadow:         0 1px 3px rgba(0,0,0,.06), 0 1px 8px rgba(0,0,0,.04);
  --sidebar-w:      228px;

  /* Tones that components hardcoded before the dark theme existed. Defined as
     tokens so both themes can redefine them in one place. */
  --surface-2:      #F3F1EC;   /* table headers, inset panels */
  --danger:         #C0392B;
  --danger-bg:      #FDEBEA;
  --warning:        #B45309;
  --success:        #166534;
  --success-bg:     #DCFCE7;
}

/* Dark theme — same layout, re-toned. Set by the header toggle, persisted in
   localStorage and applied before first paint (see the inline script in
   index.html) so the page never flashes light first. */
:root[data-theme="dark"] {
  --bg:             #14181A;
  --surface:        #1C2224;
  --surface-2:      #232A2C;
  --border:         #2E3639;
  --sidebar-bg:     #131A15;
  --sidebar-hover:  #1E2A21;
  --sidebar-active: #2F5740;
  --green:          #6FA383;
  --green-light:    #1E2A22;
  --brown:          #B08A66;
  --brown-light:    #2A221B;
  --text:           #E6EAE7;
  --text-muted:     #93A099;
  --text-sidebar:   #B8CCBE;
  --shadow:         0 1px 3px rgba(0,0,0,.5), 0 2px 12px rgba(0,0,0,.35);
  --danger:         #E4736A;
  --danger-bg:      #33211F;
  --warning:        #D69344;
  --success:        #6FBF88;
  --success-bg:     #1B2C20;
  color-scheme: dark;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  display: flex;
  min-height: 100vh;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
:root:not([data-theme="dark"]) ::-webkit-scrollbar-thumb { background: #C8CEC9; }