/* ==========================================================================
   Zain OS — Base + Reset
   Loads after tokens.css
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Tabular figures everywhere money/dates/counters live */
.num,
.money,
.date,
.counter,
[data-num] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Arabic inline wrap helper — produced by arabicWrap() in JS */
[dir="rtl"], .ar {
  font-family: var(--font-arabic);
  unicode-bidi: isolate;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--brand-soft); color: var(--text); }

/* Scrollbars — quiet, dark, brand-tinted on hover */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--r-pill); border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--brand-dim); }

/* Focus ring — single source of truth */
:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--r-sm);
}

/* Hide native focus on mouse-only interactions */
:focus:not(:focus-visible) { outline: none; }

/* ---------- Typography helpers ---------- */
.t-display { font-size: var(--fs-24); font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.t-h1      { font-size: var(--fs-22); font-weight: var(--fw-semibold); letter-spacing: -0.005em; }
.t-h2      { font-size: var(--fs-18); font-weight: var(--fw-semibold); }
.t-h3      { font-size: var(--fs-16); font-weight: var(--fw-semibold); }
.t-body    { font-size: var(--fs-14); font-weight: var(--fw-regular); }
.t-meta    { font-size: var(--fs-13); font-weight: var(--fw-regular); color: var(--text-secondary); }
.t-caption { font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--text-secondary); letter-spacing: 0.01em; }
.t-eyebrow { font-size: var(--fs-11); font-weight: var(--fw-semibold); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; }
.t-mono    { font-family: var(--font-mono); }

.text-secondary { color: var(--text-secondary); }
.text-tertiary  { color: var(--text-tertiary); }
.text-brand     { color: var(--brand); }
.text-danger    { color: var(--danger); }