/* ─────────────────────────────────────────────────────────────────────────
   Meal Whisperer — Base tokens + semantic CSS — v2.0
   ─────────────────────────────────────────────────────────────────────────
   "Cool Sage" surface system. Sage primary (#54694F) unchanged; canvas
   cooled, cards float on soft shadows, deep forest reserved for big CTAs.
   Two type families via Google Fonts.

   2.0 changes vs 1.x — see CHANGELOG-2.0.md:
     paper #FBFAF7→#F2F5F0 · wash #F1F4EB→#E7EEDF · soft-sage #E8EDDE→#DEE8D2
     ink #121212→#15201A · ink-soft #3A3A3A→#3A443B · muted #6B655C→#6A7266
     hairline #EAE6DE→#E5EBDF · cream deprecated · +forest #2C4632
     card/hover shadows softened + greened.

   Import this into any artifact:
       <link rel="stylesheet" href="../colors_and_type.css">
   or:
       @import url("./colors_and_type.css");
   ───────────────────────────────────────────────────────────────────────── */

/* Inter — body sans, still loaded from Google Fonts (no TTFs supplied). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Playfair Display — display serif, locally vendored. Paths are relative to
   this CSS file's location at the project root. */
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url('fonts/PlayfairDisplay_400Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Playfair Display'; font-style: italic; font-weight: 400;
  font-display: swap;
  src: url('fonts/PlayfairDisplay_400Regular_Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 500;
  font-display: swap;
  src: url('fonts/PlayfairDisplay_500Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Playfair Display'; font-style: italic; font-weight: 500;
  font-display: swap;
  src: url('fonts/PlayfairDisplay_500Medium_Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 600;
  font-display: swap;
  src: url('fonts/PlayfairDisplay_600SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Playfair Display'; font-style: italic; font-weight: 600;
  font-display: swap;
  src: url('fonts/PlayfairDisplay_600SemiBold_Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 700;
  font-display: swap;
  src: url('fonts/PlayfairDisplay_700Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Playfair Display'; font-style: italic; font-weight: 700;
  font-display: swap;
  src: url('fonts/PlayfairDisplay_700Bold_Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 800;
  font-display: swap;
  src: url('fonts/PlayfairDisplay_800ExtraBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Playfair Display'; font-style: italic; font-weight: 800;
  font-display: swap;
  src: url('fonts/PlayfairDisplay_800ExtraBold_Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 900;
  font-display: swap;
  src: url('fonts/PlayfairDisplay_900Black.ttf') format('truetype');
}
@font-face {
  font-family: 'Playfair Display'; font-style: italic; font-weight: 900;
  font-display: swap;
  src: url('fonts/PlayfairDisplay_900Black_Italic.ttf') format('truetype');
}

:root {
  /* ── Surfaces ─────────────────────────────────────────────────────────── */
  --mw-paper:        #F2F5F0;   /* page canvas · cool "Sage Mist" (was #FBFAF7) */
  --mw-card:         #FFFFFF;   /* white card — now floats on cool ground */
  --mw-wash:         #E7EEDF;   /* sage-wash · featured only (deepened, was #F1F4EB) */
  --mw-soft-sage:    #DEE8D2;   /* pills, chips, active fills (deepened, was #E8EDDE) */
  --mw-cream:        #E7EEDF;   /* DEPRECATED — warm panel retired; aliased to wash */

  /* ── Ink ──────────────────────────────────────────────────────────────── */
  --mw-ink:          #15201A;   /* green-black (was #121212) — softer on tinted bg */
  --mw-ink-soft:     #3A443B;   /* longform body, italic decks (cooled, was #3A3A3A) */
  --mw-muted:        #6A7266;   /* cool grey-sage meta (was warm clay #6B655C) */

  /* ── Structure ────────────────────────────────────────────────────────── */
  --mw-hairline:     #E5EBDF;   /* cool divider (was #EAE6DE) — now mainly inline rules */

  /* ── Sage family ──────────────────────────────────────────────────────── */
  --mw-sage:         #54694F;   /* primary accent · AA on white 5.9:1 — UNCHANGED */
  --mw-sage-deep:    #3F5233;   /* hover / pressed */
  --mw-sage-dark:    #4A5D3A;   /* pill text on soft-sage */
  --mw-forest:       #2C4632;   /* NEW · deep filled CTAs · 8.9:1 on white */

  /* ── Semantic ─────────────────────────────────────────────────────────── */
  --mw-success:      #3F5233;   /* check / verified */
  --mw-success-bg:   #EEF3EC;
  --mw-warning:      #B8651A;   /* aging items, unverified */
  --mw-warning-bg:   #FFF3E0;
  --mw-danger:       #A4342B;   /* allergens, errors */
  --mw-danger-bg:    #FDF2F2;
  --mw-accent:       #FF6B35;   /* flame / favorited (used sparingly) */
  --mw-fav:          #C0392B;   /* favorited heart */

  /* ── Type families ────────────────────────────────────────────────────── */
  --mw-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --mw-font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                     sans-serif;
  --mw-font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ── Type scale ───────────────────────────────────────────────────────── */
  /* All in px because the app is mobile-first. */
  --mw-fs-display:   42px;
  --mw-fs-h1:        32px;
  --mw-fs-h2:        26px;
  --mw-fs-h3:        20px;
  --mw-fs-h4:        17px;
  --mw-fs-body:      15px;
  --mw-fs-meta:      13px;
  --mw-fs-eyebrow:   11px;

  /* ── Radii ────────────────────────────────────────────────────────────── */
  --mw-r-sm:         8px;
  --mw-r:            10px;
  --mw-r-md:         14px;
  --mw-r-lg:         18px;
  --mw-r-xl:         20px;
  --mw-r-2xl:        28px;
  --mw-r-pill:       999px;

  /* ── Shadow ───────────────────────────────────────────────────────────── */
  --mw-shadow-card:  0 1px 2px rgba(20, 35, 20, 0.04), 0 10px 26px rgba(44, 70, 50, 0.07);
  --mw-shadow-hover: 0 14px 36px rgba(44, 70, 50, 0.16);
  --mw-shadow-sage:  0 8px 20px rgba(84, 105, 79, 0.25);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --mw-ease:         cubic-bezier(0.4, 0.0, 0.2, 1);
  --mw-dur:          0.18s;
}

/* ─────────────────────────────────────────────────────────────────────────
   Base resets (scoped so importing doesn't nuke a host page)
   ───────────────────────────────────────────────────────────────────────── */

.mw, .mw * { box-sizing: border-box; }

.mw {
  background: var(--mw-paper);
  color: var(--mw-ink);
  font-family: var(--mw-font-sans);
  font-size: var(--mw-fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─────────────────────────────────────────────────────────────────────────
   Semantic classes — use these on real elements
   ───────────────────────────────────────────────────────────────────────── */

.mw-display {
  font-family: var(--mw-font-display);
  font-size: var(--mw-fs-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.08;
  color: var(--mw-ink);
}

.mw-h1 {
  font-family: var(--mw-font-display);
  font-size: var(--mw-fs-h1);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--mw-ink);
}

.mw-h2 {
  font-family: var(--mw-font-display);
  font-size: var(--mw-fs-h2);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: var(--mw-ink);
}

.mw-h3 {
  font-family: var(--mw-font-display);
  font-size: var(--mw-fs-h3);
  font-weight: 500;
  line-height: 1.3;
  color: var(--mw-ink);
}

.mw-h4 {
  font-family: var(--mw-font-sans);
  font-size: var(--mw-fs-h4);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.35;
  color: var(--mw-ink);
}

.mw-deck {
  font-family: var(--mw-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  color: var(--mw-ink-soft);
  line-height: 1.5;
}

.mw-p {
  font-family: var(--mw-font-sans);
  font-size: var(--mw-fs-body);
  color: var(--mw-ink);
  line-height: 1.6;
}

.mw-p-soft {
  font-family: var(--mw-font-sans);
  font-size: var(--mw-fs-body);
  color: var(--mw-ink-soft);
  line-height: 1.6;
}

.mw-meta {
  font-family: var(--mw-font-sans);
  font-size: var(--mw-fs-meta);
  color: var(--mw-muted);
  line-height: 1.45;
}

.mw-eyebrow {
  font-family: var(--mw-font-sans);
  font-size: var(--mw-fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--mw-sage);
}

.mw-label {
  font-family: var(--mw-font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mw-muted);
}

.mw-mono {
  font-family: var(--mw-font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
}

.mw-code {
  font-family: var(--mw-font-mono);
  font-size: 13px;
  background: var(--mw-soft-sage);
  color: var(--mw-sage-dark);
  padding: 1px 6px;
  border-radius: 4px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Common surfaces — opt-in via class
   ───────────────────────────────────────────────────────────────────────── */

.mw-card {
  background: var(--mw-card);
  border: 1px solid var(--mw-hairline);
  border-radius: var(--mw-r-md);
  box-shadow: var(--mw-shadow-card);
}

.mw-card-feature {
  background: var(--mw-wash);
  border-radius: var(--mw-r-lg);
  padding: 18px;
}

.mw-hr {
  border: none;
  border-top: 1px solid var(--mw-hairline);
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   Pills (chips)
   ───────────────────────────────────────────────────────────────────────── */

.mw-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mw-font-sans);
  font-size: 12px;
  font-weight: 500;
  background: var(--mw-soft-sage);
  color: var(--mw-sage-dark);
  border-radius: var(--mw-r-pill);
  padding: 4px 10px;
  line-height: 1;
}

.mw-pill-verified::before { content: '✓'; }

.mw-pill-warn {
  background: var(--mw-warning-bg);
  color: var(--mw-warning);
}

.mw-pill-danger {
  background: var(--mw-danger-bg);
  color: var(--mw-danger);
}

/* ─────────────────────────────────────────────────────────────────────────
   Buttons
   ───────────────────────────────────────────────────────────────────────── */

.mw-btn {
  font-family: var(--mw-font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 12px 22px;
  border-radius: var(--mw-r-pill);
  border: none;
  cursor: pointer;
  transition: background var(--mw-dur) var(--mw-ease),
              color      var(--mw-dur) var(--mw-ease),
              transform  var(--mw-dur) var(--mw-ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.mw-btn-primary   { background: var(--mw-sage); color: #fff; }
.mw-btn-primary:hover   { background: var(--mw-sage-deep); }
.mw-btn-primary:active  { background: var(--mw-sage-deep); transform: scale(0.98); }

/* Big filled CTAs — "Start cooking", "Plan my week". Sage stays for accents. */
.mw-btn-cta       { background: var(--mw-forest); color: #fff; box-shadow: var(--mw-shadow-card); }
.mw-btn-cta:hover  { background: #24402A; }
.mw-btn-cta:active { background: #24402A; transform: scale(0.98); }

.mw-btn-secondary {
  background: transparent;
  color: var(--mw-ink);
  border: 1px solid var(--mw-ink);
  padding: 11px 21px;
}
.mw-btn-secondary:hover { background: var(--mw-ink); color: #fff; }

.mw-btn-tertiary {
  background: transparent;
  color: var(--mw-ink);
  border: none;
  padding: 8px 0;
  border-bottom: 1px solid var(--mw-ink);
  border-radius: 0;
}
.mw-btn-tertiary:hover { color: var(--mw-sage); border-bottom-color: var(--mw-sage); }