:root { }:root {
  --primary: #f7fafc;
  --secondary: #e2e8f0;
  --highlight: #48bb78;
  --block: #ffffff;
  --link: #2b6cb0;
  --link-hover: #1a4971;
  --link-visited: #4a90e2;
  --link-active: #2f855a;
  --text: #2d3748;
  --heading-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --body-font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Basic application */
body {
  background-color: var(--primary);
  color: var(--text);
  font-family: var(--body-font);
  font-weight: 400;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  font-weight: 600;
  color: var(--text);
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover);
}

a:visited {
  color: var(--link-visited);
}

a:active {
  color: var(--link-active);
}

.section, .sidebar {
  background-color: var(--secondary);
  padding: 20px; /* Internal padding for clean spacing */
  margin: 10px 0; /* Vertical spacing for separation */
  border-radius: 8px; /* Soft edges for modern look */
}

.card, .code-block {
  background-color: var(--block);
  color: var(--text);
  padding: 15px; /* Padding inside blocks for readability */
  margin: 10px; /* Margins for separation */
  border-radius: 4px;
  border: 1px solid #e2e8f0; /* Subtle border to define white blocks */
}

button, .highlight {
  background-color: var(--highlight);
  color: var(--text);
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
}

/* For code blocks, optional monospace font */
.code-block {
  font-family: "Fira Code", monospace;
}