/* Use explicit weight list as a robust fallback for browsers that don't apply
  variable axes the same way Google Fonts preview does. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@200;300;400;500;600;700;800&display=swap');

:root {
  --ff-base: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Apply global font to the document root */
html,
body {
  font-family: var(--ff-base) !important;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html body *:not(svg):not(i):not([class*="fa-"]):not([class*="icon"]):not([class*="octicon"]) {
  font-family: inherit !important;
  font-optical-sizing: auto;
}

/* Form controls should also inherit the global font */
input,
textarea,
select,
button {
  font-family: inherit !important;
}

/* Optional: reduce specificity clashes by forcing inheritance on pseudo elements */
html body *::before,
html body *::after {
  font-family: inherit !important;
}