/* ═══════════════════════════════════════════════════════════
   Colorado ADU Pro — Base CSS
   CSS custom properties + resets loaded before Elementor styles.
   All visual design is handled in Elementor's Kit / Custom CSS.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Brand Colors ── */
  --cap-ink:           #1a1f2e;
  --cap-ink-light:     #3d4459;
  --cap-ink-muted:     #6b7280;
  --cap-surface:       #ffffff;
  --cap-surface-warm:  #faf9f7;
  --cap-surface-alt:   #f3f1ee;
  --cap-border:        #e5e2dc;
  --cap-border-light:  #f0ede8;
  --cap-accent:        #2d6a4f;
  --cap-accent-hover:  #1b5e3a;
  --cap-accent-light:  #d8f3dc;
  --cap-accent-bg:     #f0faf3;
  --cap-warm:          #c17f24;
  --cap-warm-bg:       #fef7e8;

  /* ── Fonts ── */
  --cap-font-display: 'Bricolage Grotesque', serif;
  --cap-font-body:    'DM Sans', sans-serif;

  /* ── Spacing tokens (used in Elementor Custom CSS) ── */
  --cap-space-xs:  0.25rem;
  --cap-space-sm:  0.5rem;
  --cap-space-md:  1rem;
  --cap-space-lg:  1.5rem;
  --cap-space-xl:  2rem;
  --cap-space-2xl: 3rem;
  --cap-space-3xl: 4rem;
  --cap-space-4xl: 6rem;

  /* ── Radius ── */
  --cap-radius:    8px;
  --cap-radius-lg: 12px;

  /* ── Shadows ── */
  --cap-shadow-sm: 0 1px 2px rgba(26,31,46,0.06);
  --cap-shadow-md: 0 4px 12px rgba(26,31,46,0.08);
  --cap-shadow-lg: 0 8px 30px rgba(26,31,46,0.10);
}

/* ── Minimal reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }

/* ── Base body ── */
body {
  font-family: var(--cap-font-body);
  color: var(--cap-ink);
  background: var(--cap-surface);
}