/*
 * Heatmaster design tokens — "heritage green & gold".
 * Every colour, size and radius used by the theme and the widgets comes from here.
 * Text/background pairs below meet WCAG AA (ratios noted where they matter).
 */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallbacks so text does not jump when the web fonts arrive. */
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia"); size-adjust: 103%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }

:root {
  /* Green — the logo's green, deepened for surfaces */
  --hm-green-950: #06231d;
  --hm-green-900: #082e26;
  --hm-green-800: #0b3d33;   /* primary surface; ivory text 11.3:1 */
  --hm-green-700: #0f4f42;
  --hm-green-600: #13634f;
  --hm-green-500: #077a63;   /* logo green; white text 5.3:1 */
  --hm-green-200: #c9ded6;
  --hm-green-100: #e4efea;
  --hm-green-50:  #f2f7f4;

  /* Gold — accents, rules, stars, badges */
  --hm-gold-700: #7d6025;    /* gold as text on light backgrounds 5.5:1 */
  --hm-gold-600: #a9853a;
  --hm-gold-500: #c9a24b;    /* accent; on green-800 5.1:1 */
  --hm-gold-300: #e2cc93;
  --hm-gold-100: #f4ebd3;

  /* Orange — the logo's flame, reserved for the two actions: quote and call */
  --hm-orange-600: #d9730c;
  --hm-orange-500: #ec8317;  /* dark text on it 6.3:1 */
  --hm-orange-400: #f29a3f;

  /* Neutrals */
  --hm-ivory:  #faf7f0;
  --hm-cream:  #f3eee2;
  --hm-white:  #ffffff;
  --hm-ink:    #1b2529;      /* body text */
  --hm-ink-2:  #46535a;      /* secondary text 7.4:1 on ivory */
  --hm-ink-3:  #5f6b71;      /* meta text 5.2:1 on ivory */
  --hm-line:   #e6dfcf;
  --hm-line-2: #d4c9ae;

  --hm-success: #1b7f5c;
  --hm-error:   #b3261e;
  --hm-star:    #e0a829;

  /* Type */
  --hm-font-display: "Fraunces", "Fraunces Fallback", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --hm-font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hm-fs-h1:   clamp(2.125rem, 1.5rem + 2.9vw, 3.625rem);
  --hm-fs-h2:   clamp(1.625rem, 1.3rem + 1.6vw, 2.5rem);
  --hm-fs-h3:   clamp(1.25rem, 1.14rem + 0.5vw, 1.5rem);
  --hm-fs-h4:   1.125rem;
  --hm-fs-lead: clamp(1.0625rem, 1.01rem + 0.3vw, 1.25rem);
  --hm-fs-body: clamp(1rem, 0.98rem + 0.1vw, 1.0625rem);
  --hm-fs-sm:   0.9375rem;
  --hm-fs-xs:   0.8125rem;

  /* Space (4 px grid) */
  --hm-s-1: 0.25rem; --hm-s-2: 0.5rem; --hm-s-3: 0.75rem; --hm-s-4: 1rem; --hm-s-5: 1.5rem;
  --hm-s-6: 2rem; --hm-s-7: 3rem; --hm-s-8: 4rem;
  --hm-section: clamp(2.5rem, 1.75rem + 2.6vw, 4.25rem);   /* space above and below each section (owner: less gap between sections) */
  --hm-gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
  --hm-container: 75rem;      /* 1200 px */
  --hm-container-narrow: 46rem;

  /* Shape */
  --hm-r-sm: 8px; --hm-r-md: 12px; --hm-r-lg: 18px; --hm-r-pill: 999px;
  --hm-shadow-1: 0 1px 2px rgba(6, 35, 29, 0.05), 0 4px 14px rgba(6, 35, 29, 0.06);
  --hm-shadow-2: 0 2px 6px rgba(6, 35, 29, 0.06), 0 16px 40px rgba(6, 35, 29, 0.12);
  --hm-ring: 0 0 0 3px var(--hm-ivory), 0 0 0 6px var(--hm-gold-500);

  --hm-header-h: 4.5rem;
  --hm-actionbar-h: 4.25rem;
  --hm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/*
 * Surface context.
 * Components never ask "am I inside a dark section?". They read the values below, and every surface sets
 * them for whatever sits on it. So a white card placed on a dark section gets dark text, dark outline
 * buttons and green links again automatically, and a dark band inside a light page gets light ones.
 */
:root,
.hm-scheme-light .hm-band, .hm-surface-light, .hm-quote, .hm-panel, .hm-card, .hm-notice, .hm-review, .hm-tile, .hm-trust, .hm-contact-card,
.hm-accred__item, .hm-accred-feature__seal, .hm-toc, .hm-faq details, .hm-chip, .hm-map, .hm-product__media, .hm-logos li,
.hm-topic-card, .hm-topic__summary {
  --hm-c-heading: var(--hm-green-800);
  --hm-c-text: var(--hm-ink);
  --hm-c-muted: var(--hm-ink-2);
  --hm-c-faint: var(--hm-ink-3);
  --hm-c-link: var(--hm-green-600);
  --hm-c-link-hover: var(--hm-green-800);
  --hm-c-eyebrow: var(--hm-gold-700);
  --hm-c-outline: var(--hm-green-800);
  --hm-c-outline-border: var(--hm-green-800);
  --hm-c-outline-hover: var(--hm-green-50);
  --hm-c-tick: var(--hm-green-600);
  --hm-c-tick-bg: var(--hm-green-100);
  --hm-c-line: var(--hm-line);
  color: var(--hm-c-text);
}
.hm-scheme-dark .hm-band, .hm-surface-dark, .hm-on-dark, .hm-section--green, .hm-hero, .hm-pagehead, .hm-prefooter, .hm-footer, .hm-cta, .hm-callout,
.hm-aside-card, .hm-section--green .hm-card {
  --hm-c-heading: var(--hm-ivory);
  --hm-c-text: var(--hm-ivory);
  --hm-c-muted: rgba(250, 247, 240, 0.85);
  --hm-c-faint: rgba(250, 247, 240, 0.72);
  --hm-c-link: var(--hm-gold-300);
  --hm-c-link-hover: var(--hm-ivory);
  --hm-c-eyebrow: var(--hm-gold-300);
  --hm-c-outline: var(--hm-ivory);
  --hm-c-outline-border: rgba(250, 247, 240, 0.55);
  --hm-c-outline-hover: rgba(250, 247, 240, 0.1);
  --hm-c-tick: var(--hm-gold-300);
  --hm-c-tick-bg: rgba(201, 162, 75, 0.18);
  --hm-c-line: rgba(250, 247, 240, 0.14);
  color: var(--hm-c-text);
}