:root{--bg-color: #f4f7f6;--text-color: #333;--nav-bg: #2c3e50;--card-bg: white;--card-text: #333}.dark-mode{--bg-color: #1a1a1a;--text-color: #f4f4f4;--nav-bg: #000000;--card-bg: #2d2d2d;--card-text: #f4f4f4}.light-mode{--bg-color: #f4f7f6;--text-color: #333;--nav-bg: #2c3e50;--card-bg: white;--card-text: #333}body{margin:0;font-family:Roboto,Helvetica Neue,sans-serif;background-color:var(--bg-color);color:var(--text-color);transition:background-color .3s,color .3s}