:root {
  --hop-green: #123c2e;
  --hop-green-dark: #0e3428;
  --hop-red: #b02a2a;
  --hop-red-pressed: #8f2020;
  --hop-cream: #f8f3e8;
  --hop-beige: #efe2c8;
  --hop-surface: #fffdf8;
  --hop-charcoal: #333333;
  --hop-muted: #77736c;
  --hop-success: #2e9b69;
  --hop-gold: #c99a2e;
  --hop-warning: #a66b16;
  --hop-error: #a9302a;
  --hop-divider: rgba(18, 60, 46, 0.14);
  --hop-focus: rgba(176, 42, 42, 0.28);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-hero: 24px;

  --header-height: 72px;
  --nav-height: 72px;
  --button-height: 50px;
  --button-height-sm: 44px;
  --page-gutter: 18px;
  --content-width: 1080px;

  --font-small: 0.75rem;
  --font-body: 0.94rem;
  --font-subtitle: 1.05rem;
  --font-title: clamp(1.65rem, 5.8vw, 2.15rem);
  --font-display: clamp(2rem, 8vw, 3.4rem);

  --shadow-light: 0 8px 22px rgba(33, 40, 34, 0.07);
  --shadow-elevated: 0 20px 48px rgba(21, 42, 33, 0.15);
}

@media (min-width: 768px) {
  :root {
    --page-gutter: 24px;
    --header-height: 78px;
    --nav-height: 76px;
  }
}