@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ─── Color Scheme 1 (default) ─── */
  --fh-color-bg: #FAF8F6;
  --fh-color-text: #1C1C1C;
  --fh-color-text-muted: rgba(28,28,28,0.55);
  --fh-color-border: rgba(28,28,28,0.12);
  --fh-color-btn-bg: #1C1C1C;
  --fh-color-btn-text: #FFFFFF;

  /* ─── Color Scheme 3 (announcement, modal) ─── */
  --fh-color-teal: #003A43;

  /* ─── Topbar ─── */
  --fh-color-topbar-bg: #ECE7E2;
  --fh-color-topbar-text: #231F20;

  /* ─── Accents ─── */
  --fh-color-accent-gold: #B08B4A;
  --fh-color-sale: #E32C2B;
  --fh-color-success: #307A07;
  --fh-color-warning: #ED8A00;
  --fh-color-error: #CB2B2B;

  /* ─── Typography ─── */
  --fh-font-heading: 'Instrument Sans', sans-serif;
  --fh-font-body: 'Open Sans', sans-serif;
  --fh-heading-weight: 400;
  --fh-heading-letter-spacing: 0.18em;
  --fh-text-letter-spacing: 0em;
  --fh-btn-letter-spacing: 0.18em;

  /* ─── Font Sizes (from settings: desktop 14px base) ─── */
  --fh-text-xs: 0.75rem;    /* 12px */
  --fh-text-sm: 0.8125rem;  /* 13px */
  --fh-text-base: 0.875rem; /* 14px */
  --fh-text-lg: 1rem;       /* 16px */
  --fh-text-xl: 1.25rem;    /* 20px */

  /* Heading sizes (fluid, from design system clamp values) */
  --fh-text-h1: max(0.6875rem, clamp(1.375rem, 1.146rem + 0.976vw, 2rem));
  --fh-text-h2: max(0.6875rem, clamp(1.25rem, 1.067rem + 0.78vw, 1.75rem));
  --fh-text-h3: max(0.6875rem, clamp(1.125rem, 1.034rem + 0.39vw, 1.375rem));
  --fh-text-h4: max(0.6875rem, clamp(1rem, 0.954rem + 0.195vw, 1.125rem));
  --fh-text-h5: 0.875rem;
  --fh-text-h6: 0.75rem;

  /* ─── Layout ─── */
  --fh-container-max: 100%;
  --fh-container-xl: 85rem;       /* 1360px */
  --fh-container-lg: 78.75rem;    /* 1260px */
  --fh-container-md: 71.875rem;   /* 1150px */
  --fh-container-sm: 61.25rem;    /* 980px */
  --fh-container-gutter: 1.25rem; /* 20px mobile */

  /* ─── Section Spacing (md preset) ─── */
  --fh-section-spacing: 2.5rem;
  --fh-section-stack-gap: 2.25rem;

  /* ─── Borders & Shadows ─── */
  --fh-shadow-sm: 0 2px 8px rgb(0 0 0 / 0.05);
  --fh-shadow: 0 5px 15px rgb(0 0 0 / 0.05);
  --fh-shadow-md: 0 5px 30px rgb(0 0 0 / 0.05);

  /* ─── Transitions ─── */
  --fh-transition: 200ms ease;
  --fh-transition-slow: 400ms ease;

  /* ─── Component ─── */
  --fh-input-padding-block: 0.65rem;
  --fh-input-padding-inline: 0.8rem;
  --fh-input-border-radius: 0;
  --fh-btn-border-radius: 0;
}

@media screen and (min-width: 700px) {
  :root {
    --fh-container-gutter: 2rem; /* 32px tablet */
  }
}

@media screen and (min-width: 1000px) {
  :root {
    --fh-container-gutter: 3rem; /* 48px desktop */
    --fh-section-spacing: 4rem;
    --fh-section-stack-gap: 3rem;
  }
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--fh-font-body);
  font-size: var(--fh-text-base);
  font-weight: 400;
  color: var(--fh-color-text);
  background: var(--fh-color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; }

/* ─── Utilities ─── */
.fh-container {
  max-width: var(--fh-container-xl);
  margin: 0 auto;
  padding-left: var(--fh-container-gutter);
  padding-right: var(--fh-container-gutter);
}
.fh-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ─── Heading styles ─── */
.fh-h1 { font-family: var(--fh-font-heading); font-size: var(--fh-text-h1); font-weight: var(--fh-heading-weight); letter-spacing: var(--fh-heading-letter-spacing); }
.fh-h2 { font-family: var(--fh-font-heading); font-size: var(--fh-text-h2); font-weight: var(--fh-heading-weight); letter-spacing: var(--fh-heading-letter-spacing); }
.fh-h3 { font-family: var(--fh-font-heading); font-size: var(--fh-text-h3); font-weight: var(--fh-heading-weight); letter-spacing: var(--fh-heading-letter-spacing); }
.fh-h6 { font-family: var(--fh-font-heading); font-size: var(--fh-text-h6); font-weight: var(--fh-heading-weight); letter-spacing: var(--fh-heading-letter-spacing); }

/* ─── Buttons ─── */
.fh-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 28px;
  background: var(--fh-color-btn-bg); color: var(--fh-color-btn-text);
  font-family: var(--fh-font-heading);
  font-size: var(--fh-text-sm); font-weight: 400;
  letter-spacing: var(--fh-btn-letter-spacing); text-transform: uppercase;
  text-align: center; border: 1px solid transparent;
  transition: opacity var(--fh-transition);
  line-height: 1.65; cursor: pointer; text-decoration: none;
}
.fh-btn:hover { opacity: 0.8; }
.fh-btn--outline { background: transparent; color: var(--fh-color-text); border-color: var(--fh-color-text); }
.fh-btn--outline:hover { background: var(--fh-color-text); color: var(--fh-color-bg); opacity: 1; }
.fh-btn--white { background: #fff; color: var(--fh-color-text); border-color: transparent; }
.fh-btn--white:hover { background: var(--fh-color-text); color: #fff; opacity: 1; }
.fh-btn--block { display: flex; width: 100%; }

/* ─── Loading bar ─── */
.fh-loading-bar { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--fh-color-teal); z-index: 9999; transform: scaleX(0); transform-origin: left; transition: transform 300ms ease; pointer-events: none; }
.fh-loading-bar.is-loading { transform: scaleX(0.7); }
.fh-loading-bar.is-complete { transform: scaleX(1); opacity: 0; transition: transform 200ms, opacity 300ms 200ms; }

/* ─── Overlay ─── */
.fh-overlay { position: fixed; inset: 0; background: rgb(0 0 0 / 0.4); z-index: 200; opacity: 0; pointer-events: none; transition: opacity var(--fh-transition-slow); }
.fh-overlay.is-active { opacity: 1; pointer-events: all; }

/* ─── Toast ─── */
.fh-toast-container { position:fixed; bottom:24px; right:24px; z-index:1000; display:flex; flex-direction:column; gap:8px; }
.fh-toast { background: var(--fh-color-text); color: #fff; padding: 12px 20px; font-size: var(--fh-text-sm); opacity: 0; transform: translateY(8px); transition: all 300ms ease; pointer-events: none; }
.fh-toast.is-visible { opacity: 1; transform: translateY(0); pointer-events: all; }

/* ─── Scroll Reveal ─── */
[data-fh-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 600ms ease, transform 600ms ease; }
[data-fh-reveal].is-revealed { opacity: 1; transform: translateY(0); }

/* ─── Link styles ─── */
.fh-link-faded { transition: opacity var(--fh-transition); }
.fh-link-faded:hover { opacity: 0.6; }