:root {
  /* ---------- COLORS ---------- */
  --color-bg-gradient-start: #fde6e2; /* lyserød */
  --color-bg-gradient-end: #f7cbbf; /* varmere pink */
  --color-surface: #ffffff; /* cards */

  --color-border: #e6e6e6;

  --color-text-primary: #000000;
  --color-text-secondary: #4a4a4a;
  --color-text-muted: #6b6b6b;

  --color-accent-green: #9fd3a6; /* CTA-skygge + timer */
  --color-accent-pink: #f6d6d2; /* timer baggrund */

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-h1: clamp(2rem, 4vw, 3rem);
  --fs-h2: 1.5rem;
  --fs-h3: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight: 1.1;
  --lh-normal: 1.5;

  /* ---------- SPACING ---------- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* ---------- RADIUS ---------- */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 2rem;

  /* ---------- SHADOW ---------- */
  --shadow-soft: 0 6px 0 var(--color-accent-green);

  /* ---------- LAYOUT ---------- */
  --max-width: 720px;
}