/* ==========================================================================
   MAG Holiday Market 2026 - design tokens
   Source of truth: "MAG Holiday Market Colours.pdf" + MHM26001 print files.
   Everything visual in site.css reads from these variables.
   ========================================================================== */

/* Brand fonts. Files live in /assets/fonts. These need web licences before
   launch (Neo Contact = Linotype/Monotype; Telegraf = Pangram Pangram).
   Fallbacks below keep the layout stable if a file is missing. */
@font-face {
  font-family: "Neo Contact";
  src: url("../fonts/neo-contact-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Telegraf";
  src: url("../fonts/telegraf-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Telegraf";
  src: url("../fonts/telegraf-800.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

:root {
  /* ---- Colour: brand palette (named as in the Coolors sheet) ---- */
  --c-chocolate: #1C1508; /* Black Chocolate - text */
  --c-green:     #284F17; /* Lincoln Green - headings, buttons */
  --c-sage:      #B9CFAF; /* Laurel Green - soft fills */
  --c-red:       #C03032; /* Red - accents, asterisks, logo */
  --c-pink:      #E6B5B3; /* Baby Pink - rare accent */
  --c-wheat:     #E7D4AC; /* Wheat - text on green, cards */
  --c-snow:      #F9F5EB; /* Floral White - page background */
  --c-white:     #FFFFFF;

  /* Deep green as it prints on the postcard/flyer panels (sampled from the
     print PDF). Used for the big date panel so it matches the paper pieces. */
  --c-green-deep: #263D22;

  /* ---- Colour: roles ---- */
  --bg:            var(--c-snow);
  --bg-panel:      var(--c-green-deep);
  --bg-card:       var(--c-white);
  --bg-soft:       #F1EAD8;            /* wheat at ~45% on snow */
  --text:          var(--c-chocolate);
  --text-muted:    #5A5246;
  --text-on-dark:  var(--c-snow);
  --accent-on-dark:var(--c-wheat);
  --heading:       var(--c-green);
  --accent:        var(--c-red);
  --line:          rgba(28, 21, 8, 0.14);
  --focus:         var(--c-red);

  /* ---- Type ---- */
  --font-display: "Neo Contact", "Instrument Serif", Georgia, serif;
  --font-sans:    "Telegraf", "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Mobile-first fluid scale (min @ 360px, max @ 1200px) */
  --fs-hero:    clamp(2.75rem, 1.9rem + 4.2vw, 5.25rem);   /* big date */
  --fs-display: clamp(2.5rem, 1.75rem + 3.6vw, 4.5rem);    /* "Shop Local." */
  --fs-h2:      clamp(2rem, 1.55rem + 2.2vw, 3.25rem);     /* section titles */
  --fs-h3:      clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --fs-lead:    clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-fine:    0.8125rem;

  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-body:  1.55;

  --fw-regular: 400;
  --fw-bold:    800;

  /* ---- Space (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-y: clamp(3.5rem, 2.5rem + 5vw, 7rem);
  --gutter:    clamp(1.25rem, 0.9rem + 1.8vw, 2.5rem);

  /* ---- Layout ---- */
  --w-text:  38rem;
  --w-page:  72rem;

  /* ---- Shape & depth ---- */
  --radius-sm: 8px;
  --radius-md: 14px;   /* matches "Explore the Market" box on the postcard */
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(28, 21, 8, 0.06), 0 6px 20px rgba(28, 21, 8, 0.06);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur:  180ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}