/* 1. Apply Founder Grotesk to headings and labels with uppercase styling */

h1,
h2,
h3,
h4,
h5,
h6,
.label,
.heading,
.section-title {
  font-family: 'Founder Grotesk', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* 1.2 Apply Founder Grotesk to navbar/title bar text */

#title-bar,
#title-bar * {
  font-family: 'Founder Grotesk', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* 1.3 Apply DM Mono to all numbers */

body * {
  font-feature-settings: 'tnum';
  /* ensures tabular figures if supported */
}

body *:not(input):not(textarea) {
  font-family: inherit;
}

body *::before,
body *::after,
body * {
  font-family: inherit;
}

body * {
  unicode-bidi: isolate;
  /* prevent glyph merging issues */
}

body * {
  font-variant-numeric: tabular-nums;
  /* fallback */
}

body * {
  font-family: 'DM Mono', monospace;
}

body *:not(:has(*)) {
  font-family: inherit;
}

body :not(:has(*)):has-text(/[0-9]/) {
  font-family: 'DM Mono', monospace !important;
}

/* Alternative way if above is not effective (most consistent cross-browser): */

.number,
[data-font="mono"],
span[class*="count"],
span[class*="number"],
div[class*="value"] {
  font-family: 'DM Mono', monospace !important;
}

/* 2. Improve input and form field behavior */

input,
textarea,
select,
button {
  font-family: inherit;
  transition: border-color 0.3s ease, outline 0.3s ease;
}

/* 3. Input focus outline */

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border: 1px solid rgb(255, 80, 80);
}

/* 4. Link interaction styling */

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* 5. Smooth font rendering */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 6. Override key icon color (e.g., make it white) */

img[alt="key"] {
  filter: brightness(0) invert(1);
}