:root {
  /* Base colors */
  --color-primary: #42835c;
  --color-primary-hover: #376e4e;
  --color-secondary: #324441;
  --color-secondary-hover: #2a3937;
  
  /* Neutrals */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-grey: #f4f4f4;
  --color-grey-dark: #d1d1d1;
  --color-grey-light: #fafafa;

  /* Accent colors */
  --color-accent: #ffd166;          /* varm gul */
  --color-accent-hover: #e6b94d;
  --color-accent-2: #118ab2;        /* kølig blå */
  --color-accent-2-hover: #0f789d;
  
  /* Text colors */
  --text-primary: #212121;
  --text-secondary: #5a5a5a;
  --text-inverse: #ffffff;

  /* Feedback colors */
  --color-success: #4caf50;
  --color-error: #f44336;
  --color-warning: #ff9800;
  --color-info: #2196f3;

  
  /* --font-base: 'Segoe UI', sans-serif; */
  --font-base: "Inter", sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.5;

  --spacing-xs: 0.25rem;
  --spacing-s: 0.5rem;
  --spacing-m: 1rem;
  --spacing-l: 2rem;

  --radius: 0.5rem;
}