/* ============================================================
   OK TOKENS v1.0 - brand fonts + magazine typography
   Loaded AFTER theme-override.css.

   Self-hosted variable fonts (no Google Fonts request):
   - Playfair Display 500-800  -> logo + H1/H2 (magazine masthead)
   - Source Serif 4 400-600    -> body text (reading ease)
   - Inter 300-800             -> buttons, labels, nav, H3 (UI)

   Colors live in theme-override.css (approved cream and sage palette).
   The optional legacy palette remains opt-in and is not the site default.
   ============================================================ */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('../fonts/playfair.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/inter.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/sserif.woff2') format('woff2');
}

:root,
html[data-theme="dark"],
html[data-theme="light"] {
  --ok-serif:  'Playfair Display', 'Didot', 'Bodoni 72', Georgia, serif;
  --ok-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ok-body:   'Source Serif 4', Georgia, 'Iowan Old Style', serif;
  --ok-radius: 12px;
  --ok-maxw:   1200px;
  --ok-gutter: clamp(20px, 3vw, 40px);
  --ok-surface-2: var(--ok-surface-alt);
}

:root,
html[data-theme="dark"] {
  --ok-logo-ink:      #F3EFE7;
  --ok-logo-band-bg:  rgba(8, 8, 8, 0.84);
  --ok-logo-band-ink: #c9c4ba;
}
html[data-theme="light"] {
  --ok-logo-ink:      #1c1c1e;
  --ok-logo-band-bg:  #F4F3F1;
  --ok-logo-band-ink: #8a8a8a;
}

/* ---------- magazine typography, sitewide ---------- */
body {
  font-family: var(--ok-body) !important;
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2,
.ok-section-title,
.ok-hero-content h1 {
  font-family: var(--ok-serif) !important;
  letter-spacing: 0;
  text-wrap: balance;
}
h3, h4, h5, h6,
button, input, select, textarea,
nav, .ok-nav, .ok-btn, .ok-label,
.ok-footer-heading, .ok-video-cta, .ok-product-price {
  font-family: var(--ok-sans);
}