@font-face {
  font-family: 'HK Grotesk';
  src: url('/css/hkgrotesk-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Recife Display';
  src: url('/css/recifedisplay-light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Tailwind v4 font variables */
:root {
  --font-sans: 'HK Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Recife Display', serif;
  
  --brand-blue: #3d92f1;
  --brand-pink: #fbd8df;
  --brand-green: #b1dfcf;
  --brand-peach: #ffd6a9;
}

/* Optional utility */
.font-display { font-family: var(--font-display); }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

.text-brand-blue {
  color: var(--brand-blue);
}
.bg-brand-blue {
  background-color: var(--brand-blue);
}
.border-brand-blue {
  border-color: var(--brand-blue);
}
.text-brand-pink {
  color: rgb(var(--brand-pink));
}
.bg-brand-pink {
  background-color: var(--brand-pink);
}
.border-brand-pink {
  border-color: var(--brand-pink);
}
.text-brand-green {
  color: var(--brand-green);
}
.bg-brand-green {
  background-color: var(--brand-green);
}
.border-brand-green {
  border-color: var(--brand-green);
}
.text-brand-peach {
  color: var(--brand-peach);
}
.bg-brand-peach {
  background-color: var(--brand-peach);
}
.border-brand-peach {
  border-color: var(--brand-peach);
}

.text-giant {
  font-size: 8rem;
  line-height: 1;
}

/* CSS */
html {
  font-size: 18px;
}
html:has(#mobile-menu[data-open="true"]) { overflow: hidden; }