/* ============================================================
   FEASTFLOW DESIGN SYSTEM
   "Nancy Meyers" — warm, classic, cozy, timeless
   ============================================================ */

:root {
  --ff-cream:        #FAF7F2;
  --ff-cream-dark:   #F2EDE4;
  --ff-linen:        #EDE5D8;
  --ff-linen-dark:   #E0D5C4;
  --ff-taupe:        #C4B49A;
  --ff-sand:         #8C7B68;
  --ff-brown:        #5C4A38;
  --ff-dark:         #2E2218;
  --ff-terra:        #C1684A;
  --ff-terra-mid:    #D4845F;
  --ff-terra-light:  #F5E8E2;
  --ff-terra-border: rgba(193,104,74,0.25);
  --ff-sage:         #7A8C6E;
  --ff-sage-dark:    #4A5C40;
  --ff-sage-light:   #E8EDE4;
  --ff-error:        #B94040;
  --ff-error-light:  #FAEAEA;
  --ff-font-serif:   'Lora', Georgia, 'Times New Roman', serif;
  --ff-font-sans:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-border:       rgba(92, 74, 56, 0.12);
  --ff-border-mid:   rgba(92, 74, 56, 0.22);
  --ff-border-strong:rgba(92, 74, 56, 0.35);
  --ff-shadow-sm:    0 1px 4px rgba(46, 34, 24, 0.07);
  --ff-shadow-md:    0 4px 16px rgba(46, 34, 24, 0.09);
  --ff-shadow-lg:    0 8px 32px rgba(46, 34, 24, 0.12);
  --ff-radius-sm:    6px;
  --ff-radius-md:    10px;
  --ff-radius-lg:    14px;
  --ff-radius-xl:    20px;
  --ff-space-xs:     4px;
  --ff-space-sm:     8px;
  --ff-space-md:     16px;
  --ff-space-lg:     24px;
  --ff-space-xl:     40px;
  --ff-space-2xl:    64px;
}

/* ── NAV ──────────────────────────────────────────────────── */
.ff-nav {
  background: #ffffff;
  border-bottom: 1px solid var(--ff-border);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--ff-space-xl);
  position: sticky;
  top: 0;
  z-index: 100;
}
.ff-nav__logo {
  font-family: var(--ff-font-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--ff-dark);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.ff-nav__logo em { font-style: italic; color: var(--ff-terra); }

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--ff-font-serif);
  font-size: 15px;
  font-weight: 400;
  background: var(--ff-terra);
  color: #FAF7F2;
  border: none;
  border-radius: var(--ff-radius-sm);
  cursor: pointer;
  padding: 13px 28px;
  transition: background 0.15s ease;
  white-space: nowrap;
  line-height: 1;
}
.btn-primary:hover { background: var(--ff-terra-mid); color: #FAF7F2; }
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--ff-font-serif);
  font-size: 15px;
  background: transparent;
  color: var(--ff-brown);
  border: 1.5px solid var(--ff-taupe);
  border-radius: var(--ff-radius-sm);
  cursor: pointer;
  padding: 12px 28px;
  transition: border-color 0.15s ease;
  white-space: nowrap;
  line-height: 1;
}
.btn-secondary:hover { border-color: var(--ff-brown); color: var(--ff-dark); }

/* ── CARDS ────────────────────────────────────────────────── */
.ff-card {
  background: #ffffff;
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius-lg);
  padding: var(--ff-space-lg);
  box-shadow: var(--ff-shadow-sm);
}
.ff-event-card {
  background: #ffffff;
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius-lg);
  overflow: hidden;
  box-shadow: var(--ff-shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}
.ff-event-card:hover { box-shadow: var(--ff-shadow-md); transform: translateY(-2px); }
.ff-event-card__accent { height: 4px; background: var(--ff-terra); }
.ff-event-card__body { padding: var(--ff-space-lg); }
.ff-event-card__date {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ff-sage-dark);
  margin-bottom: 6px;
}
.ff-event-card__title {
  font-family: var(--ff-font-serif);
  font-size: 18px;
  font-weight: 400;
  color: var(--ff-dark);
  line-height: 1.3;
  margin-bottom: 4px;
}
.ff-event-card__meta { font-size: 13px; color: var(--ff-sand); margin-bottom: var(--ff-space-md); }
.ff-event-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--ff-space-md);
  padding-top: var(--ff-space-md);
  border-top: 1px solid var(--ff-border);
}

/* ── PROGRESS ─────────────────────────────────────────────── */
.ff-progress__labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--ff-sand); margin-bottom: 5px; }
.ff-progress__bar { height: 5px; background: var(--ff-linen); border-radius: 3px; overflow: hidden; }
.ff-progress__fill { height: 100%; background: var(--ff-sage); border-radius: 3px; transition: width 0.4s ease; }

/* ── BADGES ───────────────────────────────────────────────── */
.ff-badge { display: inline-flex; align-items: center; font-family: var(--ff-font-sans); font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 20px; white-space: nowrap; }
.ff-badge--needed { background: var(--ff-terra-light); color: var(--ff-terra); }
.ff-badge--claimed { background: var(--ff-sage-light); color: var(--ff-sage-dark); }
.ff-badge--neutral { background: var(--ff-linen); color: var(--ff-sand); }
.ff-badge--full { background: var(--ff-error-light); color: var(--ff-error); }

/* ── TABS ─────────────────────────────────────────────────── */
.ff-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--ff-border); margin-bottom: var(--ff-space-lg); }
.ff-tab { font-family: var(--ff-font-sans); font-size: 14px; font-weight: 400; color: var(--ff-sand); background: none; border: none; border-bottom: 2px solid transparent; padding: 10px 20px; cursor: pointer; transition: color 0.15s, border-color 0.15s; margin-bottom: -1px; }
.ff-tab:hover { color: var(--ff-brown); }
.ff-tab--active { color: var(--ff-terra); font-weight: 500; border-bottom-color: var(--ff-terra); }

/* ── ALERTS ───────────────────────────────────────────────── */
.ff-alert { border-radius: var(--ff-radius-md); padding: 14px 18px; font-size: 14px; display: flex; align-items: flex-start; gap: 10px; margin-bottom: var(--ff-space-md); }
.ff-alert--needed { background: var(--ff-terra-light); color: var(--ff-terra); border: 1px solid var(--ff-terra-border); }
.ff-alert--success { background: var(--ff-sage-light); color: var(--ff-sage-dark); border: 1px solid rgba(74, 92, 64, 0.2); }
.ff-alert--warning { background: #FEF6E4; color: #8B6914; border: 1px solid rgba(139, 105, 20, 0.2); }
.ff-alert--error { background: var(--ff-error-light); color: var(--ff-error); border: 1px solid rgba(185, 64, 64, 0.2); }

/* ── HERO ─────────────────────────────────────────────────── */
.ff-hero { background: var(--ff-cream-dark); padding: var(--ff-space-2xl) var(--ff-space-xl); text-align: center; }
.ff-hero__eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ff-sage-dark); margin-bottom: var(--ff-space-md); }
.ff-hero__headline { font-family: var(--ff-font-serif); font-size: clamp(40px, 6vw, 64px); font-weight: 400; color: var(--ff-dark); line-height: 1.15; margin-bottom: var(--ff-space-md); }
.ff-hero__headline em { font-style: italic; color: var(--ff-terra); }
.ff-hero__sub { font-size: 17px; font-weight: 300; color: var(--ff-brown); line-height: 1.75; max-width: 520px; margin: 0 auto var(--ff-space-xl); }
.ff-hero__actions { display: flex; gap: var(--ff-space-sm); justify-content: center; flex-wrap: wrap; }

/* ── AUTH ─────────────────────────────────────────────────── */
.ff-auth-page { min-height: 100vh; background: var(--ff-cream-dark); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--ff-space-xl) var(--ff-space-lg); }
.ff-auth-logo { font-family: var(--ff-font-serif); font-size: 26px; font-weight: 400; color: var(--ff-dark); margin-bottom: 6px; text-align: center; }
.ff-auth-logo em { font-style: italic; color: var(--ff-terra); }
.ff-auth-tagline { font-size: 14px; color: var(--ff-sand); margin-bottom: var(--ff-space-xl); text-align: center; }
.ff-auth-card { background: #ffffff; border-radius: var(--ff-radius-xl); padding: var(--ff-space-xl); width: 100%; max-width: 420px; box-shadow: var(--ff-shadow-md); }
.ff-auth-card__title { font-family: var(--ff-font-serif); font-size: 26px; font-weight: 400; color: var(--ff-dark); margin-bottom: var(--ff-space-lg); }
.ff-auth-card__footer { text-align: center; font-size: 14px; color: var(--ff-sand); margin-top: var(--ff-space-md); }
.ff-auth-card__footer a { color: var(--ff-terra); }

/* ── MANAGE PANEL ─────────────────────────────────────────── */
.ff-manage-panel { background: var(--ff-cream-dark); border: 1px solid var(--ff-linen-dark); border-radius: var(--ff-radius-lg); padding: var(--ff-space-lg); margin-bottom: var(--ff-space-lg); }
.ff-manage-panel__title { font-family: var(--ff-font-serif); font-size: 18px; font-weight: 400; color: var(--ff-dark); margin-bottom: var(--ff-space-md); padding-bottom: var(--ff-space-sm); border-bottom: 1px solid var(--ff-linen-dark); }

/* ── RECIPE CARD ──────────────────────────────────────────── */
.ff-recipe-card { background: #ffffff; border: 1px solid var(--ff-border); border-radius: var(--ff-radius-md); padding: var(--ff-space-md) 18px; margin-bottom: 10px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ff-recipe-card__name { font-family: var(--ff-font-serif); font-size: 16px; font-weight: 400; color: var(--ff-dark); margin-bottom: 4px; }
.ff-recipe-card__meta { font-size: 12px; color: var(--ff-sand); }

/* ── SHARE BOX ────────────────────────────────────────────── */
.ff-share-box { background: #ffffff; border: 1px solid var(--ff-border); border-radius: var(--ff-radius-md); padding: var(--ff-space-lg); margin-bottom: var(--ff-space-lg); }
.ff-share-box__title { font-family: var(--ff-font-serif); font-size: 17px; font-weight: 400; color: var(--ff-dark); margin-bottom: var(--ff-space-sm); }
.ff-share-box__row { display: flex; gap: 8px; }

/* ── UTILITIES ────────────────────────────────────────────── */
.ff-divider { height: 1px; background: var(--ff-border); margin: var(--ff-space-lg) 0; }
.ff-container { max-width: 900px; margin: 0 auto; padding: 0 var(--ff-space-lg); }
.ff-page-content { padding: var(--ff-space-xl) var(--ff-space-lg); }
.text-terra-italic { font-style: italic; color: var(--ff-terra); }
.text-eyebrow { font-family: var(--ff-font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ff-sage-dark); }

@media (max-width: 600px) {
  .ff-hero { padding: var(--ff-space-xl) var(--ff-space-lg); }
}