/* ============================================================
   QMETER GLOBALS  —  fonts + reset + base
   Import AFTER tokens.css. Fonts live in ./fonts (copied from
   the production site). This is self-contained: no CDN, no build.
   ============================================================ */

/* ---------- FONT MODEL (2026-07-06) ----------
   Qmeter owns TWO real weights only: Regular and Medium. We declare
   WEIGHT RANGES so every "bold" request (500/600/700) maps to the REAL
   Medium glyphs — browsers NEVER synthesize fake bold. This is what makes
   headings render identically in Safari / Chrome / Firefox. Do not add a
   "700" file or ask for heavier weight; Medium IS the heading weight. */

@font-face {
  font-family: "TT Fors";
  font-weight: 100 460;          /* body / regular */
  font-style: normal;
  font-display: swap;
  src: url("./fonts/forsRegular.woff2") format("woff2"),
       url("./fonts/forsRegular.woff")  format("woff");
}
@font-face {
  font-family: "TT Fors";
  font-weight: 461 900;          /* 500/600/700 → REAL Medium, not faux-bold */
  font-style: normal;
  font-display: swap;
  src: url("./fonts/forsMedium.woff2") format("woff2"),
       url("./fonts/forsMedium.woff")  format("woff");
}
@font-face {
  font-family: "TT Fors Medium"; /* one face for headings/CTAs at any weight */
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/forsMedium.woff2") format("woff2"),
       url("./fonts/forsMedium.woff")  format("woff");
}

/* Arabic (RTL). Same family name + Arabic unicode-range means Arabic glyphs
   are served by Noto even where a component asks for "TT Fors". */
@font-face {
  font-family: "Noto Sans Arabic";
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/NotoSansArabic-var.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "TT Fors";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/NotoSansArabic-var.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/* ---------- RESET ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
  font-family: var(--font-body);
}
html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- BASE ---------- */
body {
  background: var(--bg-page);
  color: var(--ink-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-medium);
  color: var(--ink-strong);
  line-height: 1.15;
  font-weight: 500;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }

p { color: var(--ink-body); }
a { color: inherit; text-decoration: none; }

.medium-font { font-family: var(--font-medium); }
.regular-font { font-family: var(--font-body); }

/* Arabic / RTL */
html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] textarea {
  font-family: var(--font-arabic);
  letter-spacing: 0;
}

/* Hide scrollbars the brand way (still scrollable) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border-solid); border-radius: 999px; }

/* Scroll-reveal (JS toggles .is-in). Respect reduced motion. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-reveal) var(--ease),
              transform var(--dur-reveal) var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}