/* =========================================================================
   AFibroidsMiracle — Colors & Type
   Editorial health brand. Warm, content-first, mobile-first.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&family=Inter:wght@400;500;600&display=swap');

:root {
  /* --- Base surfaces ------------------------------------------------- */
  --bg-ivory:       #FAF6F0;   /* default page bg, warm not white */
  --bg-bone:        #F2ECE2;   /* alt grouped sections */
  --bg-sand:        #EAE1D1;   /* card hover, quiet emphasis */
  --bg-ink:         #1C1A17;   /* dark surface (footer, feature) */
  --bg-ink-soft:    #2A2622;   /* dark surface softer */

  /* --- Foreground (text) -------------------------------------------- */
  --fg-1:           #1C1A17;   /* primary text, warm near-black */
  --fg-2:           #4A433C;   /* secondary / meta */
  --fg-3:           #837A70;   /* tertiary / captions, timestamps */
  --fg-4:           #B5AD9F;   /* disabled, decorative */
  --fg-on-dark-1:   #FAF6F0;   /* on ink */
  --fg-on-dark-2:   #C9C1B4;   /* muted on ink */

  /* --- Brand accents ------------------------------------------------ */
  --garnet:         #8E2F3D;   /* primary accent — links, CTAs, eyebrows */
  --garnet-deep:    #6F1F2C;   /* hover / active */
  --garnet-tint:    #F4E4E6;   /* background tint */
  --moss:           #4A5A3C;   /* secondary — natural/diet content */
  --moss-deep:      #374529;
  --moss-tint:      #E5EADC;
  --clay:           #D4A574;   /* tertiary — highlights */
  --clay-deep:      #B8824A;
  --clay-tint:      #F5EADC;

  /* --- Semantic ----------------------------------------------------- */
  --border-hairline: rgba(28, 26, 23, 0.12);
  --border-rule:     rgba(28, 26, 23, 0.22);
  --overlay-scrim:   rgba(0, 0, 0, 0.55);

  --evidence-strong: #4A5A3C;   /* moss */
  --evidence-moderate:#B8824A;  /* clay deep */
  --evidence-emerging:#837A70;  /* fg-3 */

  /* --- Radii -------------------------------------------------------- */
  --r-0:  0px;
  --r-1:  2px;
  --r-2:  4px;
  --r-pill: 999px;

  /* --- Spacing (4-pt base) ------------------------------------------ */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 144px;

  /* --- Shadows (used sparingly) ------------------------------------- */
  --shadow-button: 0 1px 2px rgba(28, 26, 23, 0.08);
  --shadow-float:  0 30px 60px -20px rgba(0, 0, 0, 0.30);

  /* --- Motion ------------------------------------------------------- */
  --ease-quiet: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:   180ms;
  --dur-base:   300ms;
  --dur-slow:   500ms;

  /* --- Type families ------------------------------------------------ */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Fluid type scale --------------------------------------------- */
  --fs-eyebrow: 12px;
  --fs-meta:    13px;
  --fs-ui:      15px;
  --fs-body:    clamp(18px, 1.1vw + 16px, 21px);
  --fs-lead:    clamp(20px, 1.4vw + 17px, 26px);
  --fs-h6:      16px;
  --fs-h5:      18px;
  --fs-h4:      clamp(20px, 1.2vw + 17px, 24px);
  --fs-h3:      clamp(24px, 1.8vw + 18px, 32px);
  --fs-h2:      clamp(32px, 3vw + 20px, 48px);
  --fs-h1:      clamp(40px, 5vw + 22px, 72px);
  --fs-display: clamp(56px, 8vw + 24px, 112px);

  /* --- Line heights ------------------------------------------------- */
  --lh-tight:   1.02;
  --lh-headline:1.08;
  --lh-snug:    1.2;
  --lh-body:    1.55;
  --lh-reading: 1.62;
  --lh-ui:      1.4;

  /* --- Tracking ----------------------------------------------------- */
  --tr-display: -0.02em;
  --tr-headline:-0.01em;
  --tr-body:    0;
  --tr-eyebrow: 0.12em;
  --tr-button:  0.01em;

  /* --- Content widths ---------------------------------------------- */
  --w-measure:  680px;   /* article body */
  --w-wide:     1080px;
  --w-page:     1200px;
  --w-full:     1440px;
}

/* =========================================================================
   Semantic element styles — import this file and elements inherit the system
   ========================================================================= */

html, body {
  background: var(--bg-ivory);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-reading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight);    letter-spacing: var(--tr-display); font-weight: 500; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-headline); letter-spacing: var(--tr-headline); font-weight: 500; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-headline); letter-spacing: var(--tr-headline); font-weight: 500; }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug);     letter-spacing: var(--tr-headline); font-weight: 500; }
h5 { font-size: var(--fs-h5); line-height: var(--lh-snug);     letter-spacing: 0; font-weight: 600; }
h6 { font-size: var(--fs-h6); line-height: var(--lh-snug);     letter-spacing: 0; font-weight: 600; font-family: var(--font-ui); }

p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-reading);
  color: var(--fg-1);
  max-width: var(--w-measure);
  margin: 0 0 1.2em 0;
  text-wrap: pretty;
}

.lead, p.lead {
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--fg-2);
  font-style: italic;
  font-weight: 400;
}

.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--garnet);
}

.meta {
  font-family: var(--font-ui);
  font-size: var(--fs-meta);
  color: var(--fg-3);
  letter-spacing: 0.01em;
}

a {
  color: var(--garnet);
  text-decoration: none;
  background-image: linear-gradient(var(--garnet), var(--garnet));
  background-size: 0% 1px;
  background-position: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur-base) var(--ease-quiet);
}
a:hover { background-size: 100% 1px; }

code, pre, .mono {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: 0.92em;
  background: var(--bg-bone);
  padding: 1px 6px;
  border-radius: var(--r-1);
}

blockquote {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.3;
  font-style: italic;
  color: var(--fg-1);
  border-left: 2px solid var(--garnet);
  padding-left: var(--s-5);
  margin: var(--s-7) 0;
  max-width: var(--w-measure);
}

hr {
  border: 0;
  border-top: 1px solid var(--border-hairline);
  margin: var(--s-7) 0;
}