/* ========== 2: Variable ========== */
:root {
/* farver*/
    --color-primary: rgba(59, 130, 246, 1); /* En blålig primærfarve */
    --color-primary-light: rgba(99, 156, 255, 1);
    --color-primary-dark: rgba(37, 99, 235, 1);
    --color-secondary: rgba(249, 115, 22, 1); /* En orange sekundærfarve */
    --color-secondary-light: rgba(251, 146, 60, 1);
    --color-secondary-dark: rgba(234, 88, 12, 1);
    --color-dark: rgb(11, 10, 10);
    --color-bright: rgba(249, 250, 251, 1);

/* Spacing */
    --space-zero: 0;
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-xxl: 3rem;
    --space-xxxl: 6rem;

/* Font-størrelser */
    --font-size-sm: 0.75rem;
    --font-size-base: 1rem;
    --font-size-md: 1.5rem;
    --font-size-lg: 2rem;
    --font-size-xl: 3rem;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-bold: 700;

/* Fonte */
  --font-family-sans: sans-serif;
  --font-family-serif: serif;
  --font-family-mono: monospace;

/* Containers */
    --container-full: 100%;
    --container-wide: 1280px;
    --container-narrow: 640px;
    --container-fluid: calc(100% - var(--space-md) * 2);
    --container-padding: 1rem;
    --container-padding-sm: 0.5rem;

  /* Borders & Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;

  --border-width-sm: 1px;
  --border-width-md: 2px;
  --border-width-lg: 4px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}