/* Webbrüder — Bold Agency design tokens */

:root {
  /* Core palette */
  --bg: #FAFAF8;
  --bg-alt: #F3F1ED;
  --text: #1A1A1A;
  --text-muted: #6B6B6B;
  --ink: #0F1410;
  --ink-muted: rgba(255, 255, 255, 0.72);
  --accent: #2D5A3D;
  --accent-hover: #3A7350;
  --accent-light: #E8F0EB;
  --border: #E5E3DE;
  --white: #FFFFFF;
  --surface: #F7F5F1;
  --surface-elevated: #FFFFFF;
  --glow: 0 0 0 1px rgba(45, 90, 61, 0.08), 0 24px 64px rgba(45, 90, 61, 0.18);

  /* Typography */
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', -apple-system, sans-serif;
  --display-xl: clamp(2.75rem, 6.5vw, 4.5rem);
  --display-md: clamp(2rem, 4vw, 3rem);
  --label: 0.72rem;

  /* Layout */
  --max-w: 1200px;
  --section-pad: clamp(5rem, 10vw, 8rem);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(15, 20, 16, 0.06);
  --shadow-md: 0 8px 32px rgba(15, 20, 16, 0.08);
  --shadow-lg: 0 20px 56px rgba(15, 20, 16, 0.12);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-base: 280ms;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}