:root {
  /* Spacing - uændret */
  --1px: 0.06rem;
  --4px: 0.25rem;
  --8px: 0.5rem;
  --12px: 0.75rem;
  --16px: 1rem;
  --24px: 1.5rem;
  --32px: 2rem;
  --40px: 2.5rem;
  --100px: 6.25rem;
  --300px: 18.75rem;
  --400px: 25rem;
  --600px: 37.5rem;
  --768px: 48rem;
  --1000px: 62.5rem;
  --1200px: 75rem;

  /* Happy & venlige farver */
  --color-primary: #ff6f61;      /* coral */
  --color-secondary: #ffe082;    /* pastel gul */
  --color-accent: #42a5f5;       /* venlig blå */
  --color-success: #81c784;      /* blød grøn */
  --color-warning: #ffb74d;      /* varm orange */
  --color-error: #ef5350;        /* varm rød */

  --color-bg: #fffdf9;           /* næsten hvid med varme toner */
  --color-surface: #ffffff;      /* kort og bokse */
  --color-muted: #f0f4f8;        /* sektion baggrunde */
  --color-border: #dddddd;       /* grå men ikke tung */

  --color-text: #1e1e1e;         /* mørk grå, ikke helt sort */
  --color-text-muted: #666666;
  --color-text-inverse: #ffffff;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1);

  --font-family: 'Segoe UI', 'Nunito', 'Poppins', sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #ff8a80;
    --color-secondary: #ffd95a;
    --color-accent: #90caf9;
    --color-success: #a5d6a7;
    --color-warning: #ffcc80;
    --color-error: #e57373;

    --color-bg: #181818;
    --color-surface: #222;
    --color-muted: #2a2a2a;
    --color-border: #444;

    --color-text: #eeeeee;
    --color-text-muted: #aaaaaa;
    --color-text-inverse: #000000;

    --shadow-sm: 0 1px 2px rgba(255, 255, 255, 0.05);
    --shadow-md: 0 4px 6px rgba(255, 255, 255, 0.08);
    --shadow-lg: 0 10px 20px rgba(255, 255, 255, 0.1);
  }
}


*, *::before, *::after {
    box-sizing: border-box;
}
html, body {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--color-bg);
}