/* ============================================================
   evaMD — GLP-1 intake theme
   Brand: women's telemedicine, minimalist editorial.
   Palette: burgundy #7A1F33 (primary/accent/CTA), ink #1A1A1A,
   bone/cream bg #F4F1EA, secondary #6B655C, card #FFFFFF, cream text #F4F1EA.
   Fonts: Fraunces (headings), Inter (body/UI).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── CSS variable mapping ─────────────────────────────────── */
:root {
  --primary: #7A1F33;
  --accent: #7A1F33;
  --darkgray: #1A1A1A;
  --background: #F4F1EA;
}

/* ── Page surface + base typography ───────────────────────── */
html, body {
  background-color: #F4F1EA !important;
  color: #1A1A1A;
}

/* Body / UI font everywhere */
body, button, input, select, textarea, p, span, div, a, li, label, h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Headings use Fraunces serif display */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
  color: #1A1A1A;
}

/* Cream page background also painted on the full-height wrappers
   the funnel uses (Tailwind bg-[#FFFFFA] cards/screens) */
.bg-\[\#FFFFFA\] {
  background-color: #F4F1EA !important;
}

/* Product cards / inner white surfaces → pure white #FFFFFF */
.bg-white {
  background-color: #FFFFFF !important;
}

/* ── Source ink (Rose #1F2D34 family) → evaMD ink #1A1A1A ── */
.text-\[\#1F2D3499\] { color: #6B655C !important; }            /* muted plan label → secondary */
.bg-\[\#1F2D340D\]   { background-color: rgba(26,26,26,0.05) !important; }
.bg-\[\#1F2D341A\],
.border-\[\#1F2D341A\] { border-color: rgba(26,26,26,0.10) !important; }

/* ── Black CTAs (.bg-[#000000]) → burgundy w/ cream text ──── */
.bg-\[\#000000\] {
  background-color: #7A1F33 !important;
  color: #F4F1EA !important;
}
.bg-\[\#000000\]:hover {
  background-color: #1A1A1A !important;
}
/* dosage-mode / brand / dosage selector borders that use #000000 */
.border-\[\#000000\] { border-color: #7A1F33 !important; }
.text-\[\#000000\]   { color: #1A1A1A !important; }

/* ── Class-based action buttons (welcome / info / graph) ──── */
.action-button,
.continue-button,
.button_next,
button.action-button {
  background-color: #7A1F33 !important;
  color: #F4F1EA !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  border: 0 !important;
  border-radius: 9999px !important;
}
.action-button:hover,
.continue-button:hover,
.button_next:hover {
  background-color: #1A1A1A !important;
  color: #F4F1EA !important;
}

/* ── Links → burgundy ─────────────────────────────────────── */
a, a:visited {
  color: #7A1F33;
}

/* ── Source coral accent rgb(215,140,124) / #D78C7C → burgundy
      (selected product-card borders are now var(--primary) in the
      component code; this is a belt-and-suspenders catch) ───── */
.border-\[rgb\(215\2c 140\2c 124\)\],
.hover\:border-\[rgb\(215\2c 140\2c 124\)\]:hover {
  border-color: #7A1F33 !important;
}

/* Semantic colors (error/success/info/neutral) intentionally
   left untouched: #EF4444 / #4CAF50 / #49A0F2 / #CCCCCC. */