/* Mediplant — shared design tokens & utilities (Phase 1).
 *
 * PALETTE
 *   --mp-green   #456941   primary deep green   (titles, save buttons, accents)
 *   --mp-teal    #1E8473   secondary accent     (Cool temperament, links on dark, success states)
 *   --mp-mauve   #9E4B56   warm accent          (Warm temperament, alerts, highlights)
 *   --mp-peach   #EE9C81   light accent         (dividers, underlines, soft highlights)
 *   --mp-cream   #FAF7F2   page background      (was #faf8f3)
 *   --mp-text    #2A2A24   body text
 *
 * TYPOGRAPHY
 *   --mp-display 'Niramit'  display + headings (loaded via Google Fonts in site header)
 *   --mp-body    'Roboto'   body text
 *
 * Pair with mediplant-pages-roadmap.html §1.3.
 */

:root {
  /* Surfaces */
  --mp-bg:        #FAF7F2;
  --mp-surface:   #FFFFFF;
  --mp-surface-2: #F3EFE7;

  /* Text */
  --mp-text:  #2A2A24;
  --mp-muted: #6B6B63;
  --mp-faint: #A4A39B;

  /* Brand colors */
  --mp-green:        #456941;
  --mp-green-soft:   #DCE5D7;
  --mp-green-deep:   #344E32;

  --mp-teal:         #1E8473;
  --mp-teal-soft:    #D4E9E4;

  --mp-mauve:        #9E4B56;
  --mp-mauve-soft:   #F5DEDF;

  --mp-peach:        #EE9C81;
  --mp-peach-soft:   #FBE6DD;

  /* Temperament aliases — keep var names stable so older code doesn't break */
  --mp-warm:    var(--mp-mauve);
  --mp-cool:    var(--mp-teal);
  --mp-neutral: var(--mp-green);

  /* Borders */
  --mp-border:      #E4DDCE;
  --mp-border-soft: #EFEAE0;

  /* Geometry */
  --mp-radius:    12px;
  --mp-radius-sm: 8px;

  /* Typography */
  --mp-display: 'Niramit', 'Lora', Georgia, serif;
  --mp-body:    'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ── Body defaults ───────────────────────────────────────── */
.mp-body, body.mp-body {
  font-family: var(--mp-body);
  color: var(--mp-text);
  background: var(--mp-bg);
}

/* Mediplant containers force their own font stack so the WP theme
   doesn't override the design system on tool pages. */
#mp-herbs,
#mp-herb-profile,
#mp-herb-compare,
#mp-temp,
#mp-recipe,
#mp-bp {
  font-family: var(--mp-body);
  color: var(--mp-text);
}

#mp-herbs h1, #mp-herbs h2, #mp-herbs h3,
#mp-herb-profile h1, #mp-herb-profile h2, #mp-herb-profile h3,
#mp-herb-compare h1, #mp-herb-compare h2,
#mp-temp h1, #mp-temp h2, #mp-temp h3,
#mp-recipe h1, #mp-recipe h2, #mp-recipe h3, #mp-recipe h4,
#mp-bp h1, #mp-bp h2, #mp-bp h3 {
  font-family: var(--mp-display);
  color: var(--mp-green);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ── Pills (temperament + generic) ───────────────────────── */
.mp-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-family: var(--mp-body);
}

.mp-pill-warm    { background: var(--mp-mauve-soft); color: var(--mp-mauve); }
.mp-pill-cool    { background: var(--mp-teal-soft);  color: var(--mp-teal); }
.mp-pill-neutral { background: var(--mp-green-soft); color: var(--mp-green); }

/* ── Disclaimer ─────────────────────────────────────────── */
.mp-disclaimer {
  margin-top: 32px;
  padding: 14px 18px;
  background: var(--mp-peach-soft);
  border-left: 3px solid var(--mp-peach);
  border-radius: 6px;
  font-size: 13px;
  color: #7a4a32;
  line-height: 1.6;
}
.mp-disclaimer strong { color: var(--mp-mauve); }

/* ── States ─────────────────────────────────────────────── */
.mp-loading,
.mp-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--mp-muted);
  font-family: var(--mp-body);
}

/* ── Save buttons ────────────────────────────────────────── */
.mp-save-btn {
  padding: 10px 20px;
  background: var(--mp-green);
  color: #fff;
  border: none;
  border-radius: var(--mp-radius-sm);
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  font-family: var(--mp-body);
  transition: background 0.15s, transform 0.05s;
}
.mp-save-btn:hover  { background: var(--mp-green-deep); }
.mp-save-btn:active { transform: translateY(1px); }
.mp-save-btn:disabled,
.mp-save-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Secondary save button (outline) */
.mp-save-btn-outline {
  background: #fff;
  color: var(--mp-green);
  border: 1.5px solid var(--mp-green);
}
.mp-save-btn-outline:hover { background: var(--mp-green-soft); }