:root {
  --color-bg: #f4f8fb;
  --color-text: #333;
  --color-primary: #2c3e50;
  --color-primary-light: #2980b9;
  --color-accent: #56784e;
  --color-strongly-decreases: #ff7455;
  --color-moderately-decreases: #fba46a;
  --color-slightly-decreases: #efcb96;
  --color-slightly-increases: #c9e0ae;
  --color-moderately-increases: #8fc99a;
  --color-strongly-increases: #01a996;
  --color-white: #fff;
  --color-no-pv-impact: #b0b0b0;
  --color-cant-tell: #f5f5f5;
  --color-cant-tell-border: #999;
}

body {
  font-family: "Roboto", Arial, sans-serif;
  margin: 20px;
  background-color: var(--color-bg);
  color: var(--color-text);
}

h1 {
  font-weight: 300;
  font-size: 2.5em;
  color: var(--color-primary);
  margin-bottom: 20px;
}

h2,
h3,
h4,
h5 {
  color: var(--color-primary);
  margin-top: 0.7em;
  margin-bottom: 0.3em;
}

button {
  font-family: inherit;
  font-size: 1em;
  padding: 8px 18px;
  border-radius: 5px;
  border: none;
  background: var(--color-primary);
  color: var(--color-white);
  cursor: pointer;
  margin: 8px 0;
  transition: background 0.2s;
  opacity: 0.9;
}

button:hover {
  opacity: 1;
}

a {
  color: #0055aa;
}