/* ============================================
   DOCTORS & DOLLARS — MASTER DESIGN TOKENS
   Own brand, own token set — not a copy of
   grandvision-co's --gv-* variables. See the
   build spec's Design system section.
   ============================================ */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Work Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

:root {
  /* --- Colors (confirmed from the live site's compiled CSS) --- */
  --dd-white:         #ffffff;
  --dd-black:         #000000;
  --dd-gold:          #D6B654;
  --dd-gold-hover:    #e0c576;
  --dd-cream:         #F4F4F3;
  --dd-charcoal:      #383838;
  --dd-text-muted:    rgba(56, 56, 56, 0.65);

  /* --- Typography (Playfair Display + Work Sans, replacing the
     paid Adobe Fonts Monarcha/Interface — approved 2026-09-18) --- */
  --dd-serif:         'Playfair Display', serif;
  --dd-sans:          'Work Sans', sans-serif;

  /* --- Font Sizes --- */
  --dd-eyebrow:       11px;
  --dd-h1:            52px;
  --dd-h2:            32px;
  --dd-h3:            22px;
  --dd-body:          15px;
  --dd-small:         13px;
  --dd-cta:           11px;

  /* --- Font Weights --- */
  --dd-regular:       400;
  --dd-medium:        500;
  --dd-bold:          600;

  /* --- Spacing --- */
  --dd-section-v:     80px;
  --dd-section-h:     40px;
  --dd-max-width:     1100px;
  --dd-col-gap:       64px;

  /* --- Radii --- */
  --dd-radius:        3px;
  --dd-radius-card:   6px;
  --dd-rule-gold:     1px solid rgba(214, 182, 84, 0.35);
}

/* --- Mobile Overrides --- */
@media (max-width: 768px) {
  :root {
    --dd-h1:          36px;
    --dd-h2:          26px;
    --dd-section-v:   56px;
    --dd-section-h:   24px;
    --dd-col-gap:     32px;
  }
}

@media (max-width: 480px) {
  :root {
    --dd-h1:          28px;
    --dd-h2:          22px;
  }
}