/* ==========================================================================
   GLOBAL THEME TOKENS — the only file you edit to re-skin the whole site.
   Everything else (main.css, theme.json, templates) reads these variables.
   ========================================================================== */
:root {
  /* Brand palette — THEME: Burgundy (default). Another palette = another :root[data-theme] block below. */
  --mf-c-primary:       #6B2737;
  --mf-c-deep:          #4A1C28;
  --mf-c-accent:        #C9A96E;
  --mf-c-bg:            #F5EFE6;
  --mf-c-white:         #FFFFFF;
  --mf-c-ink:           #292525;
  --mf-c-soft:          color-mix(in srgb, #C9A96E 22%, #FFFFFF);   /* tint used for chips/backgrounds */
  --mf-c-accent-ink:    #85652A;   /* accent for thin lines/strokes on LIGHT backgrounds */
  --mf-photo-filter:    hue-rotate(-18deg) saturate(.95);   /* tints the hero photo toward the palette */

  /* Swatches shown in the theme switcher */
  --mf-sw-burgundy:     #6B2737;
  --mf-sw-navy:         #17324D;

  /* Semantic roles — point these at any palette value to swap themes */
  --mf-primary:         var(--mf-c-primary);
  --mf-primary-hover:   color-mix(in srgb, var(--mf-c-primary) 86%, black);
  --mf-chrome:          var(--mf-c-deep);   /* header / footer / top bar */
  --mf-accent:          var(--mf-c-accent);
  --mf-bg:              var(--mf-c-bg);
  --mf-surface:         var(--mf-c-white);           /* cards */
  --mf-text:            var(--mf-c-ink);
  --mf-text-muted:      color-mix(in srgb, var(--mf-c-ink) 68%, var(--mf-c-bg));
  --mf-on-primary:      var(--mf-c-white);
  --mf-on-chrome:       var(--mf-c-bg);
  --mf-border:          color-mix(in srgb, var(--mf-c-ink) 12%, transparent);
  --mf-accent-ink:      var(--mf-c-accent-ink);
  --mf-photo:           var(--mf-photo-filter);
  --mf-accent-soft:     var(--mf-c-soft);

  /* Typography */
  --mf-font:            'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mf-w-body: 400; --mf-w-label: 500; --mf-w-button: 600; --mf-w-heading: 700; --mf-w-hero: 800;

  --mf-fs-h1: 52px; --mf-fs-h2: 40px; --mf-fs-h3: 28px; --mf-fs-body: 16px;
  --mf-fs-lead: 18px; --mf-fs-button: 16px; --mf-fs-maid: 20px; --mf-fs-price: 24px;

  /* Shape, depth, layout */
  --mf-radius: 20px; --mf-radius-sm: 12px; --mf-radius-pill: 999px;
  --mf-shadow: 0 1px 2px rgba(41,37,37,.04), 0 8px 24px rgba(41,37,37,.06);
  --mf-shadow-lg: 0 2px 4px rgba(41,37,37,.05), 0 24px 56px rgba(41,37,37,.12);
  --mf-container: 1240px;
  --mf-gutter: 24px;
  --mf-section-y: 96px;
  --mf-nav-h: 88px;
  --mf-topbar-h: 40px;

  /* Motion */
  --mf-ease: cubic-bezier(.16,1,.3,1);
  --mf-dur: .8s;
}
/* THEME: Navy + Terracotta + Sand — #17324D navy (primary), #C96F52 terracotta (accent), #E8D7BD sand (soft tint), #FAF7F1 background */
:root[data-theme="navy"] {
  --mf-c-primary:    #17324D;
  --mf-c-deep:       #0F2236;   /* darker navy for header/footer/dark sections */
  --mf-c-accent:     #C96F52;
  --mf-c-bg:         #FAF7F1;
  --mf-c-ink:        #1B2733;
  --mf-c-soft:       color-mix(in srgb, #E8D7BD 70%, #FFFFFF);
  --mf-c-accent-ink: #A9502F;
  --mf-photo-filter: none;
}

@media (max-width: 767px) {
  :root {
    --mf-fs-h1: 34px; --mf-fs-h2: 28px; --mf-fs-h3: 22px; --mf-fs-body: 16px;
    --mf-fs-lead: 16px; --mf-fs-button: 15px; --mf-fs-maid: 18px; --mf-fs-price: 21px;
    --mf-gutter: 18px; --mf-section-y: 64px; --mf-nav-h: 68px; --mf-topbar-h: 36px;
  }
}