/* EZgo Design System — shared tokens and reusable UI primitives. */
:root {
  --ezgo-color-cream: #F6F3EB;
  --ezgo-color-forest: #163D35;
  --ezgo-color-sage: #DDE7DB;
  --ezgo-color-terracotta: #B8563E;
  --ezgo-color-white: #FFFFFF;
  --ezgo-color-forest-muted: #163D35BF;
  --ezgo-color-border: #163D3533;
  --ezgo-font-display: 'DM Serif Display', Georgia, serif;
  --ezgo-font-body: 'DM Sans', Arial, sans-serif;
  --ezgo-radius-sm: 8px;
  --ezgo-radius-md: 12px;
  --ezgo-radius-pill: 999px;
  --ezgo-space-1: 4px;
  --ezgo-space-2: 8px;
  --ezgo-space-3: 12px;
  --ezgo-space-4: 16px;
  --ezgo-space-6: 24px;
  --ezgo-space-8: 32px;
  --ezgo-space-12: 48px;
  --ezgo-space-16: 64px;
  --ezgo-shadow-soft: 0 8px 30px rgba(22, 61, 53, .08);
  --ezgo-transition: 180ms ease;
}

html { color: var(--ezgo-color-forest); background: var(--ezgo-color-cream); }
body { font-family: var(--ezgo-font-body); color: var(--ezgo-color-forest); }
:is(h1, h2, h3, h4, h5, h6, .font-serif) { font-family: var(--ezgo-font-display); font-weight: 400; }

/* Component contract: use these classes for all future shared UI. */
.ez-section { width: 100%; padding: var(--ezgo-space-16) var(--ezgo-space-6); }
.ez-container { width: 100%; max-width: 1200px; margin-inline: auto; }
.ez-eyebrow { color: var(--ezgo-color-terracotta); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.ez-card { border: 1px solid var(--ezgo-color-border); border-radius: var(--ezgo-radius-md); background: var(--ezgo-color-cream); overflow: hidden; }
.ez-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--ezgo-space-3) var(--ezgo-space-6); border-radius: var(--ezgo-radius-sm); font: 500 1rem var(--ezgo-font-body); text-decoration: none; transition: opacity var(--ezgo-transition), background var(--ezgo-transition), color var(--ezgo-transition); }
.ez-button--primary { background: var(--ezgo-color-forest); color: var(--ezgo-color-cream); }
.ez-button--light { background: var(--ezgo-color-white); color: var(--ezgo-color-forest); }
.ez-button--secondary { border: 1px solid var(--ezgo-color-forest); color: var(--ezgo-color-forest); background: transparent; }
.contact-cta { background: var(--ezgo-color-white); color: var(--ezgo-color-forest); }
.ez-button:hover { opacity: .88; }
.ez-button:focus-visible { outline: 3px solid var(--ezgo-color-terracotta); outline-offset: 4px; }
.ez-media { display: block; width: 100%; height: 100%; object-fit: cover; }
.ez-muted { color: var(--ezgo-color-forest-muted); }

@media (min-width: 768px) { .ez-section { padding-inline: var(--ezgo-space-12); } }
@media (prefers-reduced-motion: reduce) { .ez-button { transition: none; } }