// ─── Site Font & Style Configuration ─────────────────────────────────────────
// Edit this file to change fonts, colors, and theme across the entire website.
// Save the file and refresh the browser to see changes.

window.SITE_CONFIG = {

  // ── Display / Heading Font ──────────────────────────────────────────────────
  // Used for all large headings, titles, and display text.
  // Pick one from the list below (copy exactly as written):
  //
  //   'Italiana'              — elegant thin serif (current default)
  //   'Bodoni Moda'           — high-contrast fashion serif
  //   'Playfair Display'      — classic editorial serif
  //   'Cormorant Garamond'    — refined luxury serif
  //   'Cinzel'                — architectural all-caps serif
  //   'Marcellus'             — clean Roman serif
  //   'Libre Caslon Text'     — sturdy book serif
  //   'Instrument Serif'      — modern geometric serif
  //
  displayFont: 'Cormorant',

  // ── Per-Heading Fonts ───────────────────────────────────────────────────────
  // Override font for each heading level independently.
  // Leave as null to inherit displayFont above.
  // Same font options as Display Font above.
  //
  //   h1Font  — page title / hero headings  (largest)
  //   h2Font  — section headings            (medium)
  //   h3Font  — sub-section headings        (smaller)
  //
  h1Font: null,   // e.g. 'Italiana'
  h2Font: null,   // e.g. 'Playfair Display'
  h3Font: null,   // e.g. 'Marcellus'

  // ── Hero Section Font ───────────────────────────────────────────────────────
  // Used only for the big headline on the home page hero.
  // Leave as null to use h1Font (or displayFont as fallback).
  //
  heroFont: 'Italiana',

  // ── Body / Paragraph Font ───────────────────────────────────────────────────
  // Used for all body text, labels, and UI elements.
  // Pick one from the list below:
  //
  //   'Jost'        — geometric sans-serif (current default)
  //   'Outfit'      — friendly geometric sans
  //   'Manrope'     — rounded modern sans
  //   'Tenor Sans'  — elegant narrow sans
  //   'Cormorant'   — refined serif body
  //   'Geist'       — clean tech sans
  //
  bodyFont: 'Jost',

  // ── Heading Letter Spacing ──────────────────────────────────────────────────
  // Controls how tight or loose the heading letters are.
  // Range: -5 (very tight) to 5 (very loose). Default: -2
  //
  displayTracking: -2,

  // ── Heading Font Weight ─────────────────────────────────────────────────────
  // 300 = light   |   400 = regular   |   700 = bold
  //
  displayWeight: 400,

  // ── Accent Color ────────────────────────────────────────────────────────────
  // The gold/highlight color used for buttons, underlines, and accents.
  // Use any hex color code.
  //
  accent: '#C8A86B',

  // ── Base Theme ──────────────────────────────────────────────────────────────
  // Controls the overall background darkness and surface colors.
  // Pick one:
  //
  //   'midnight'   — deepest black
  //   'obsidian'   — warm near-black
  //   'graphite'   — dark cool grey (current default)
  //   'pewter'     — medium dark grey
  //   'champagne'  — warm dark brown
  //   'porcelain'  — light cream (light mode)
  //
  theme: 'midnight',

};

// Apply fonts immediately to CSS variables — runs before React mounts.
(function() {
  var c = window.SITE_CONFIG;
  var r = document.documentElement.style;
  r.setProperty('--font-display',     "'" + c.displayFont + "', serif");
  r.setProperty('--font-hero',        "'" + (c.heroFont || c.h1Font || c.displayFont) + "', serif");
  r.setProperty('--font-sans',        "'" + c.bodyFont + "', system-ui, sans-serif");
  r.setProperty('--display-tracking', (c.displayTracking / 100) + 'em');
  r.setProperty('--display-weight',   String(c.displayWeight));
  r.setProperty('--accent',           c.accent);

  // Per-heading font overrides via CSS cascade (no component changes needed).
  var h1f = c.h1Font || c.displayFont;
  var h2f = c.h2Font || c.displayFont;
  var h3f = c.h3Font || c.displayFont;
  var style = document.getElementById('amg-heading-fonts') || document.createElement('style');
  style.id = 'amg-heading-fonts';
  style.textContent =
    "h1 { --font-display: '" + h1f + "', serif; }\n" +
    "h2 { --font-display: '" + h2f + "', serif; }\n" +
    "h3 { --font-display: '" + h3f + "', serif; }\n";
  document.head.appendChild(style);
})();