:root {
  --background: #f9f9f9;
  --text: #222;
  --header-bg: #D9D9D9;
  --sidebar-bg: #f9f9f9;
  --sidebar-border: #12171b;
  --link-color: #222;
  --link-hover-bg: #ddd;
  --shadow: 0px 3px 6px rgba(0, 0, 0, 0.063),
            0px 3px 6px rgba(0, 0, 0, 0.063); /* light shadow */
  --garis: #ccc;
}

[data-theme="dark"] {
  --background: #242E34;
  --text: #ffffff;
  --header-bg: #2C3A44;
  --sidebar-bg: #242E34;
  --sidebar-border: white;
  --link-color: #ffffff;
  --link-hover-bg: #65696C;
  --shadow: 0px 3px 6px rgba(255, 255, 255, 0.2),
            0px 3px 6px rgba(255, 255, 255, 0.2); /* dark shadow */
  --garis: #676767;
}