/* ══ PORTOFINO BRAND SYSTEM v4.0 ══
   The Family Dinner Method
   Cascade override — loaded after page-level styles */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500&family=DM+Mono:wght@300;400&display=swap');

:root {
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  /* Portofino palette — remaps old variable names */
  --cream:    #F7F3EC;
  --off-wht:  #EEF3FD;
  --rust:     #1C3FAA;
  --rust-dk:  #0D2070;
  --rust-lt:  #C8D8F8;
  --sage:     #2E5C28;
  --sage-dk:  #1C4A18;
  --sage-lt:  #EEF3FD;
  --lav:      #C8D8F8;
  --lav-lt:   #EEF3FD;
  --charcoal: #1A1A18;
  --mid:      #3A3A36;
  --mustard:  #F5C842;
  --border:   rgba(200, 216, 248, 0.6);
  --r:        4px;
  --rs:       2px;
}

body {
  font-family: var(--font-body) !important;
  font-weight: 300;
  background: var(--cream);
}

/* Display / heading font */
h1, h2, h3, h4,
.nav-brand,
.footer-brand,
.stat-n,
.price-amount,
.tc-quote,
.ugc-quote,
#hero h1,
h2.sec-h2,
.hero-h1 {
  font-family: var(--font-display) !important;
  font-weight: 300;
}

/* Body / UI font */
.nav-link, .step-title, .vs-title, .vs-hint,
.step-body, .vs-body, .prob-body, .faq-a,
.lc-text p, .hero-sub, .lead, .buy-lead,
.recipe-desc, .tc-name, .recipe-body,
p, li, td, input, select, textarea {
  font-family: var(--font-body) !important;
}

/* Mono font — labels, buttons, eyebrows, tags */
.nav-cta, .btn-primary, .btn-ghost, .btn-buy,
.eyebrow, .hero-eyebrow, .ticker-item,
.footer-col-label, .recipe-tag, .recipe-meta-item,
.tag, .card-label, .block-label, .doc-filename,
.buy-card-title, .cover-eyebrow, .prob-title,
.lc-form button, .faq-q, .vs-trigger,
.product-doc-title, .recipe-name {
  font-family: var(--font-mono) !important;
}

/* Nav brand — italic serif */
.nav-brand {
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  font-style: italic !important;
  letter-spacing: 0.01em !important;
}

/* Buttons — mono, uppercase, sharp */
.btn-primary, .btn-ghost, .btn-buy, .nav-cta {
  border-radius: 2px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-size: 0.62rem !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}
.btn-primary:active, .btn-ghost:active,
.btn-buy:active, .nav-cta:active {
  transform: scale(0.97) !important;
  box-shadow: none !important;
}

/* Hero eyebrow */
.hero-eyebrow {
  border-radius: 2px !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.28em !important;
  font-weight: 400 !important;
  border-color: rgba(28, 63, 170, 0.35) !important;
  color: rgba(247, 243, 236, 0.65) !important;
  background: transparent !important;
}

/* Eyebrow labels */
.eyebrow {
  font-size: 0.56rem !important;
  letter-spacing: 0.28em !important;
  font-weight: 400 !important;
}

/* Step numbers */
.step-num {
  border-radius: 2px !important;
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
}

/* Card radius */
.prob-card, .product-doc, .recipe-card, .tc,
.ugc-card, .buy-card, .output-card, .step-grid,
.vs-list, .faq-list, .table-wrap, .hero-media,
.vs-arr, .faq-arr, .carousel-btn, .tc-avatar {
  border-radius: var(--r) !important;
}

/* Stats — limoncello on dark */
.stat-n {
  font-weight: 300 !important;
  color: var(--mustard) !important;
  letter-spacing: -0.02em !important;
}

/* Ticker — mono */
.ticker-item {
  font-size: 0.6rem !important;
  letter-spacing: 0.22em !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
}

/* Testimonials */
.tc-quote {
  font-size: 1rem !important;
  font-weight: 300 !important;
  font-style: italic !important;
}
.tc-stars { color: var(--mustard) !important; }

/* Stars across all uses */
.stars-sm { color: var(--mustard) !important; }

/* Footer brand */
.footer-brand {
  font-size: clamp(2.8rem, 7vw, 5.5rem) !important;
  font-weight: 300 !important;
  font-style: italic !important;
  letter-spacing: -0.02em !important;
}
.footer-brand em { color: var(--mustard) !important; font-style: italic; }

/* Lead capture form */
.lc-form input { border-radius: 2px !important; font-family: var(--font-body) !important; }
.lc-form button { border-radius: 2px !important; box-shadow: none !important; }

/* UGC quotes */
.ugc-quote { font-style: italic !important; }

/* Price display */
.price-amount { font-weight: 300 !important; letter-spacing: -0.04em !important; }

/* Recipe names in cards → display font */
.recipe-name {
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Recipe tags back to mono */
.recipe-tag {
  border-radius: 2px !important;
  font-size: 0.52rem !important;
  letter-spacing: 0.1em !important;
  font-weight: 400 !important;
  font-family: var(--font-mono) !important;
}

/* Focus states */
:focus-visible {
  outline: 2px solid var(--rust) !important;
  outline-offset: 2px !important;
  border-radius: 2px !important;
}