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

:root {
  --bg:        #1e1e1e;
  --bg2:       #272727;
  --bg3:       #383838;
  --bg4:       #303030;
  --border:    #444;
  --border-thick: #555;
  --accent:    #a0a0a0;
  --text:      #e8e8e8;
  --text-given:#fff;
  --text-user: #c8a97e;
  --text-dim:  #888;
  --note-col:  #f0a500;
  --err-text:  #ff5555;
  --err-bg:    #3a1515;
  --ok-text:   #4aff8a;
  --msg-col:   #c8a97e;
}

[data-theme="light"] {
  --bg:        #f0f4ff;
  --bg2:       #dde6f7;
  --bg3:       #b8cef5;
  --bg4:       #ccd9f0;
  --border:    #a0b4d8;
  --border-thick: #808080;
  --accent:    #606060;
  --text:      #1a1a2e;
  --text-given:#000;
  --text-user: #1554a8;
  --text-dim:  #666;
  --note-col:  #b07000;
  --err-text:  #c0392b;
  --err-bg:    #fde8e8;
  --ok-text:   #1a7a3a;
  --msg-col:   #1554a8;
}