:root {
  --header_footer_background: #f9f9f9;
  --main_background: #ffffff;
  --logo_color1: #2f9437;
  --logo_color2: #3a4545;
  --data-consumption: #4ea95a;
  --data-consumption-strong: #2f7d32;
  --data-consumption-soft: #e8f5ea;
  --data-price: #2f6fe4;
  --data-price-strong: #184ea8;
  --data-grid-tariff: #4f8f8f;
  --data-cost: #7b61a8;
  --data-cost-strong: #5f478a;
  --data-solar: #d89a1f;
  --data-solar-strong: #a56f00;
  --data-grid: #6f8394;
  --text-light: #ffffff;
  --text-dark: #333333;
  --text-muted: #777777;
  --link-color: var(--logo_color2);
  --link-hover-bg: #3a4545;
  --link-hover-text: #ffffff;
  --link-active-bg: var(--logo_color1);
  --link-active-text: #ffffff;
  --input-border: #cccccc;
  --input-bg: #f9f9f9;
  --input-focus-border: var(--logo_color2);
  --input-focus-shadow: rgba(10, 37, 50, 0.2);
  --error-bg: #ffe0e0;
  --error-text: #aa0000;
  --success-bg: #e6ffed;
  --success-text: #0a7a2a;
  --success-border: #b2f5bf;
  --header-height: clamp(88px, 11vh, 108px);
  --page-width-app: 1240px;
  --page-width-reading: 1100px;
  --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  --footer-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);

  /* Fælles UI-komponenter */
  --ui-ink: #153d60;
  --ui-ink-strong: #10344f;
  --ui-copy: #506b82;
  --ui-muted: #71889b;
  --ui-green: #2f9437;
  --ui-green-dark: #26792e;
  --ui-green-soft: #edf8ef;
  --ui-blue: #2f6fe4;
  --ui-blue-soft: #eef4ff;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f7faf8;
  --ui-page: #f5f8f6;
  --ui-line: rgba(21, 61, 96, 0.11);
  --ui-line-strong: rgba(21, 61, 96, 0.18);
  --ui-shadow-sm: 0 10px 30px rgba(21, 61, 96, 0.06);
  --ui-shadow-md: 0 20px 48px rgba(21, 61, 96, 0.09);
  --ui-radius-sm: 12px;
  --ui-radius-md: 18px;
  --ui-radius-lg: 26px;
}