:root {
  /* Olive (Primär) */
  --color-olive-50: #F2F5EC;
  --color-olive-100: #E2E9D3;
  --color-olive-200: #C7D3A9;
  --color-olive-300: #A9BC7E;
  --color-olive-400: #8AA35A;
  --color-olive-500: #6B8140;
  --color-olive-600: #566832;
  --color-olive-700: #445228;
  --color-olive-800: #333E1F;
  --color-olive-900: #232A16;

  /* Graublau (Sekundär) */
  --color-slate-50: #F3F5F6;
  --color-slate-100: #E3E8EA;
  --color-slate-200: #C7D1D5;
  --color-slate-300: #A6B4B9;
  --color-slate-400: #839499;
  --color-slate-500: #5E767E;
  --color-slate-600: #4B616A;
  --color-slate-700: #3B4E55;
  --color-slate-800: #2C3B40;
  --color-slate-900: #1C2528;

  /* Terrakotta (Akzent warm) */
  --color-terracotta-50: #FBF1EC;
  --color-terracotta-100: #F6DED2;
  --color-terracotta-200: #EABB9C;
  --color-terracotta-300: #DC9970;
  --color-terracotta-400: #CC7A52;
  --color-terracotta-500: #BC5E36;
  --color-terracotta-600: #9B4A29;
  --color-terracotta-700: #7A3A20;
  --color-terracotta-800: #582A17;
  --color-terracotta-900: #3D1D11;

  /* Ocker (Akzent Highlight) */
  --color-ochre-50: #FBF3E4;
  --color-ochre-100: #F5E4C0;
  --color-ochre-200: #EACB8C;
  --color-ochre-300: #DDAE5C;
  --color-ochre-400: #E0A83F;
  --color-ochre-500: #BF8620;
  --color-ochre-600: #9C6B18;
  --color-ochre-700: #7A5312;
  --color-ochre-800: #543A0D;
  --color-ochre-900: #2E2008;

  --color-white: #FFFFFF;
  --color-paper: #FBFAF7;
  --color-ink: #1E2321;

  /* Semantische Tokens */
  --color-primary: var(--color-olive-600);
  --color-primary-hover: var(--color-olive-700);
  --color-secondary: var(--color-slate-600);
  --color-accent-warm: var(--color-terracotta-600);
  --color-accent-warm-hover: var(--color-terracotta-700);
  --color-accent-highlight: var(--color-ochre-600);

  --color-bg: var(--color-paper);
  --color-bg-alt: var(--color-olive-50);
  --color-surface: var(--color-white);
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-slate-700);
  --color-text-on-dark: var(--color-white);
  --color-text-on-dark-muted: var(--color-slate-100);
  --color-border: var(--color-slate-200);

  --color-focus: var(--color-terracotta-600);

  /* Typografie */
  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-accent: 'Fraunces', Georgia, serif;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.375rem;
  --font-size-h2: clamp(1.75rem, 3vw + 1rem, 2.5rem);
  --font-size-h1: clamp(2.25rem, 5vw + 1rem, 3.75rem);

  --line-height-tight: 1.15;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  /* Spacing (8px-Basis) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-section-y: clamp(3rem, 6vw + 1rem, 6rem);

  --container-max: 1200px;

  /* Radius / Shadow */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(30, 35, 33, 0.06);
  --shadow-md: 0 4px 12px rgba(30, 35, 33, 0.08);
  --shadow-lg: 0 12px 32px rgba(30, 35, 33, 0.12);

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

.hero,
.site-footer {
  --color-focus: var(--color-ochre-400);
}