@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}




:root {
  
  --haf-orange:        #f18e00;
  --haf-orange-hover:  #d97d00;
  
  --haf-orange-ink:    #8f5400;
  
  --haf-on-orange:     #2f373e;
  --haf-grey:          #2f373e;

  
  --haf-bg:            #f4f1eb;
  --haf-surface:       #fbfaf7;
  --haf-surface-2:     #ffffff;
  
  --haf-surface-3:     #e9e5dd;
  --haf-ink:           #2f373e;
  --haf-ink-muted:     #5f686f;
  --haf-ink-faint:     #676f76;
  --haf-line:          rgba(47, 55, 62, .14);
  --haf-line-strong:   rgba(47, 55, 62, .22);
  --haf-line-xstrong:  rgba(47, 55, 62, .30);
  
  --haf-bar:           rgba(244, 241, 235, .92);

  
  --haf-positive:      #46704e;
  --haf-caution:       #8a6320;
  --haf-negative:      #a63f36;
  
  --haf-positive-wash: rgba(70, 112, 78, .12);
  --haf-caution-wash:  rgba(138, 99, 32, .12);
  --haf-negative-wash: rgba(166, 63, 54, .12);

  
  --haf-badge-fill:    #2f373e;
  --haf-badge-mark:    #ffffff;

  
  --haf-font:          "Gotham", "Montserrat", "Inter", Arial, sans-serif;
  --haf-font-display:  "Gotham", "Montserrat", "Inter", Arial, sans-serif;
  --haf-weight-body:   400;
  --haf-weight-medium: 500;
  --haf-weight-display: 700;

  --haf-shadow:        0 24px 70px rgba(22, 25, 27, .10);
  --haf-shadow-soft:   0 12px 30px rgba(22, 25, 27, .07);
  --haf-radius:        24px;
  --haf-radius-sm:     14px;
  --haf-pill:          999px;
}


:root[data-theme="night"] {
  --haf-bg:            #0e1113;
  --haf-surface:       #171a1d;
  --haf-surface-2:     #202428;
  --haf-surface-3:     #262b30;
  --haf-ink:           #f4f1eb;
  --haf-ink-muted:     #a9b0b4;
  --haf-ink-faint:     #8a9298;
  --haf-line:          rgba(244, 241, 235, .14);
  --haf-line-strong:   rgba(244, 241, 235, .24);
  --haf-line-xstrong:  rgba(244, 241, 235, .32);
  --haf-bar:           rgba(14, 17, 19, .92);
  
  --haf-orange-ink:    #f9a63a;
  --haf-on-orange:     #2f373e;

  --haf-positive:      #6fa87a;
  --haf-caution:       #d8a34d;
  --haf-negative:      #d9695f;
  --haf-positive-wash: rgba(111, 168, 122, .14);
  --haf-caution-wash:  rgba(216, 163, 77, .14);
  --haf-negative-wash: rgba(217, 105, 95, .14);

  
  --haf-badge-fill:    #f4f1eb;
  --haf-badge-mark:    #2f373e;

  --haf-shadow:        0 28px 80px rgba(0, 0, 0, .45);
  --haf-shadow-soft:   0 14px 36px rgba(0, 0, 0, .32);
}


@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
  }
}

html { color-scheme: light; }
:root[data-theme="night"] { color-scheme: dark; }

body {
  background: var(--haf-bg);
  color: var(--haf-ink);
  font-family: var(--haf-font);
  font-weight: var(--haf-weight-body);
  
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .haf-display {
  font-family: var(--haf-font-display);
  font-weight: var(--haf-weight-display);
  color: var(--haf-ink);
  
  line-height: 1.05;
  letter-spacing: 0;
}

a { color: var(--haf-orange-ink); }
a:hover { color: var(--haf-orange); }



.haf-logo { color: var(--haf-ink); display: inline-block; }
.haf-logo svg { height: 100%; width: auto; display: block; }
.haf-logo--header { height: 34px; }
.haf-logo--hero   { height: 64px; }


.haf-logo--on-dark {
  --haf-badge-fill: #f4f1eb;
  --haf-badge-mark: #2f373e;
  color: #ffffff;
}

.haf-logo--on-light {
  --haf-badge-fill: #2f373e;
  --haf-badge-mark: #ffffff;
  color: #2f373e;
}




.haf-btn {
  background: var(--haf-orange);
  color: var(--haf-on-orange);
  font-family: var(--haf-font-display);
  font-weight: var(--haf-weight-display);
  border: 0;
  border-radius: var(--haf-pill);
  padding: 14px 26px;
  cursor: pointer;
}
.haf-btn:hover { background: var(--haf-orange-hover); }

.haf-card {
  background: var(--haf-surface);
  border: 1px solid var(--haf-line);
  border-radius: var(--haf-radius);
  box-shadow: var(--haf-shadow-soft);
}



.haf-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--haf-ink-muted);
  font-family: var(--haf-font);
  font-size: 13px;
  line-height: 1;
  border: 1px solid var(--haf-line);
  border-radius: var(--haf-pill);
  padding: 8px 14px;
  cursor: pointer;
}
.haf-theme-toggle:hover {
  color: var(--haf-ink);
  border-color: var(--haf-line-strong);
}
.haf-theme-toggle svg { width: 15px; height: 15px; }

.haf-theme-toggle .haf-icon-moon { display: block; }
.haf-theme-toggle .haf-icon-sun  { display: none; }
:root[data-theme="night"] .haf-theme-toggle .haf-icon-moon { display: none; }
:root[data-theme="night"] .haf-theme-toggle .haf-icon-sun  { display: block; }



.haf-logo-img--night { display: none; }
:root[data-theme="night"] .haf-logo-img--day   { display: none; }
:root[data-theme="night"] .haf-logo-img--night { display: block; }


body, .haf-card, .haf-btn, .haf-theme-toggle, header, footer, nav {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
@media (prefers-reduced-motion: reduce) {
  body, .haf-card, .haf-btn, .haf-theme-toggle, header, footer, nav { transition: none; }
}