/* ═══════════════════════════════════════════════════════════════════════════
   Ópera de Morelia — Apple-tier typography system
   Fraunces (variable: opsz 9–144, wght 100–900, SOFT 0–100, ital 0/1)
   Inter Tight (variable: wght 100–900)
   + Petit Formal Script (signature flourish — más refinado que Allura)
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-signature: 'Petit Formal Script', 'Allura', cursive;
}

/* ──────────── BASELINE override every font-family ──────────── */
html, body, p, li, span, div, button, input, textarea, select, label, a{
  font-family: var(--font-body) !important;
}

h1, h2, h3, h4, h5, h6,
.mod-h2, .mod-h3, .hero-title, .mod-card-title, .gc-title{
  font-family: var(--font-display) !important;
}

/* ──────────── FRAUNCES variation settings (the Apple-tier secret) ──────────── */
.hero-title,
.opm-numbers-hero-num,
.opm-numbers-card-num,
.mod-h2{
  font-variation-settings:
    "opsz" 144,    /* display optical sizing — for big sizes */
    "SOFT" 50,     /* soft setting — friendlier curves */
    "wght" 500;
  font-weight: 500;
  font-style: normal;
}

/* Italic flourish — only when explicitly opted-in via class */
.fraunces-italic,
.mod-h2 em.is-italic,
.mod-quote p,
.opm-numbers-hero-suffix{
  font-variation-settings:
    "opsz" 144,
    "SOFT" 70,
    "wght" 400;
  font-style: italic;
}

/* Medium body / cards / lede — opsz 28 (mid-range balanced) */
.mod-card-title,
.opm-numbers-hero-headline{
  font-variation-settings:
    "opsz" 72,
    "SOFT" 60,
    "wght" 500;
}

/* Inter Tight variations — tighter premium body */
body, p, .mod-prose p, .mod-lede, .hero-lede,
.opm-numbers-hero-lede, .opm-numbers-card-body,
.mod-card-meta, .mod-eyebrow, .mod-btn, .btn-primary, .btn-secondary,
.opm-newsletter-input, .opm-search-input,
.an-btn, header .apple-nav a, header .apple-nav button,
.footer-name, .footer-desc, .footer-col li a{
  font-family: var(--font-body) !important;
}

/* Inter Tight weight tuning for premium feel */
.mod-lede, .hero-lede, .opm-numbers-hero-lede{
  font-weight: 400 !important;
  letter-spacing: -0.011em !important;
}
.mod-btn, .btn-primary, .btn-secondary, .an-btn{
  font-weight: 500 !important;
  letter-spacing: -0.008em !important;
}
.mod-eyebrow, .opm-numbers-eyebrow, .hero-eyebrow{
  font-weight: 500 !important;
  letter-spacing: 0.24em !important;
}

/* ──────────── SIGNATURE replace Allura → Petit Formal Script (more refined) ──────────── */
.mod-portrait-signature,
.allura,
.signature{
  font-family: var(--font-signature) !important;
  font-weight: 400 !important;
}

/* ──────────── WORDMARK Apple-clean ──────────── */
.an-brand-text,
.apple-nav .brand,
.apple-nav-brand{
  font-family: var(--font-display) !important;
  font-variation-settings: "opsz" 36, "SOFT" 50, "wght" 500;
  font-weight: 500 !important;
  font-style: normal !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  font-size: 17px !important;
}

/* ──────────── PERFORMANCE: font-display swap is already set via Google Fonts URL ──────────── */
/* No FOUT prevention via opacity:0 — Apple prefers FOUT visible content over invisible */

/* ──────────── MOBILE typography tuning ──────────── */
@media (max-width: 768px){
  .hero-title{
    font-variation-settings: "opsz" 96, "SOFT" 50, "wght" 500;
  }
  .mod-h2{
    font-variation-settings: "opsz" 72, "SOFT" 50, "wght" 500;
  }
}

/* ──────────── REDUCED selection focus tone ──────────── */
::selection{
  background: rgba(189, 176, 157, 0.28);
  color: #F2EDE2;
}