@font-face {
  font-family: 'Merriweather';
  src: url('../fonts/Merriweather_Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Merriweather';
  src: url('../fonts/Merriweather_SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Merriweather';
  src: url('../fonts/Merriweather_Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* Charis SIL v7 — caractères spéciaux shimaore et linguistiques */
@font-face {
  font-family: 'Charis';
  src: url('../fonts/Charis-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Charis';
  src: url('../fonts/Charis-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Charis';
  src: url('../fonts/Charis-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Charis';
  src: url('../fonts/Charis-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

html, :root {
  font-size: clamp(16px, calc(12px + 0.417vw), 18px);
}

:root {
  /* === Fonts === */
  --habari-font-heading: 'Merriweather', Georgia, serif;
  --habari-font-shimaore: 'Charis', Georgia, serif;

  /* === Layout === */
  --habari-navbar-height: 70px;

  /* === Colors === */
  --habari-primary-brand: #9E2E2E;
  --habari-primary-brand-light: #AA433E;
  --habari-primary-brand-pale: #D28E86;
  --habari-primary-brand-off: #f9ecea;
  --habari-secondary-navy: #03224D;
  --habari-secondary-navy-light: #21325C;
  --habari-secondary-navy-pale: #787D9A;
  --habari-secondary-navy-off: #e8e8ee;
  --habari-dark-shark: #262626;
  --habari-dark-light: #373737;
  --habari-dark-pale: #666666;
  --habari-dark-400: #666666;
  --habari-dark-off: #e9e9e9;
  --habari-gold: #C9A227;
  --habari-gold-light: #d0aa3f;
  --habari-gold-pale: #e2c27a;
  --habari-gold-off: #fcf6ec;
  --habari-warning-orange: #FF9800;
  --habari-warning-light: #ffa12c;
  --habari-warning-pale: #ffc685;
  --habari-warning-off: #fff5ea;
  --habari-success: #4CAF50;
  --habari-success-light: #60b760;
  --habari-success-pale: #a2d49e;
  --habari-success-off: #f0f8ee;
  --habari-info: #167cdf;
  --habari-info-light: #4587e2;
  --habari-info-pale: #9cb5ef;
  --habari-info-off: #eff2fc;

  /* EPCI — couleurs cartographiques (sync habari-mayotte-map.js) */
  --habari-epci-cagnm:        #114929;
  --habari-epci-cadema:       #FF9100;
  --habari-epci-3co:          #0268A5;
  --habari-epci-petite-terre: #1A3A6C;
  --habari-epci-ccsud:        #10A1BC;
}