@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  --ek-font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ek-font-h1: 36px;
  --ek-font-h2: 30px;
  --ek-font-h3: 24px;
  --ek-font-subtitle: 20px;
  --ek-font-card-title: 22px;
  --ek-font-body: 18px;
  --ek-font-small: 16px;
  --ek-font-button-primary: 18px;
  --ek-font-button-secondary: 17px;
  --ek-font-menu: 15px;
  --ek-font-badge: 14px;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--ek-font-family) !important;
}

body {
  font-size: var(--ek-font-body) !important;
  font-weight: 400 !important;
}

h1 {
  font-size: var(--ek-font-h1) !important;
  font-weight: 700 !important;
}

h2 {
  font-size: var(--ek-font-h2) !important;
  font-weight: 700 !important;
}

h3 {
  font-size: var(--ek-font-h3) !important;
  font-weight: 600 !important;
}

:where(.subtitle, .sub-title, .section-subtitle, .lead) {
  font-size: var(--ek-font-subtitle) !important;
  font-weight: 500 !important;
}

:where(.card-title, .ek-card-title, article > header h2, article > h2) {
  font-size: var(--ek-font-card-title) !important;
  font-weight: 600 !important;
}

:where(small, .small, .text-small, .helper-text, .hint) {
  font-size: var(--ek-font-small) !important;
  font-weight: 400 !important;
}

:where(button, .btn, [role="button"]) {
  font-size: var(--ek-font-button-primary) !important;
  font-weight: 700 !important;
}

:where(.btn-secondary, .button-secondary, .ek-btn-secondary) {
  font-size: var(--ek-font-button-secondary) !important;
  font-weight: 600 !important;
}

:where(nav a, nav button, .menu a, .menu button) {
  font-size: var(--ek-font-menu) !important;
  font-weight: 500 !important;
}

:where(.badge, .pill, .chip, [class*="badge"], [class*="chip"]) {
  font-size: var(--ek-font-badge) !important;
  font-weight: 600 !important;
}

@media (max-width: 1024px) {
  :root {
    --ek-font-h1: 32px;
    --ek-font-h2: 27px;
    --ek-font-h3: 22px;
    --ek-font-subtitle: 19px;
    --ek-font-card-title: 21px;
    --ek-font-body: 17px;
    --ek-font-button-primary: 17px;
    --ek-font-button-secondary: 16px;
  }
}

@media (max-width: 767px) {
  :root {
    --ek-font-h1: 28px;
    --ek-font-h2: 24px;
    --ek-font-h3: 21px;
    --ek-font-subtitle: 18px;
    --ek-font-card-title: 20px;
    --ek-font-body: 16px;
    --ek-font-small: 14px;
    --ek-font-button-primary: 16px;
    --ek-font-button-secondary: 15px;
    --ek-font-menu: 15px;
    --ek-font-badge: 13px;
  }
}