/*
 * base.css — fonts, reset, per-script rules, type utilities.
 * Tokens only. See tokens.css for the scale and the two named exceptions.
 */

/* ---- Fonts: Alan Sans — DECIDED, design-context/typography/README.md, F-56.
   Landed on master a4a975d; these four subsets are the EXACT shipped bytes
   (apps/web/public/fonts/), not re-derived. One family, both scripts, split
   into two @font-face names by unicode-range for delivery, same convention
   as the monorepo. Named exception 2 of 2: descriptor literals live here. */
@font-face {
  font-family: 'Alan Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/alansans/alansans-arabic-400.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200D, U+FDF2, U+FDFD;
}
@font-face {
  font-family: 'Alan Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/alansans/alansans-arabic-600.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200D, U+FDF2, U+FDFD;
}
@font-face {
  font-family: 'Alan Sans Latin'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/alansans/alansans-latin-400.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2122;
}
@font-face {
  font-family: 'Alan Sans Latin'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/alansans/alansans-latin-600.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2122;
}

:root {
  /* Arabic first in the stack — reads the way the primary market does. */
  --font-sans: 'Alan Sans Arabic', 'Alan Sans Latin', system-ui, -apple-system, 'Segoe UI', 'Noto Sans Arabic', sans-serif;
}

/* ---- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-3);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }
img { display: block; max-width: 100%; }
svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { cursor: pointer; }
a { color: var(--colour-text-link); text-underline-offset: var(--space-1); }
a:hover { color: var(--colour-action-primary-hover); }
hr { border: 0; border-block-start: var(--hairline) solid var(--colour-border-hairline); margin: 0; }
[hidden] { display: none !important; }

/* ---- The letter-spacing floor (fonts.css, face-independent). ------------- */
:root:lang(ar), [lang='ar'], [lang='ar'] * { letter-spacing: normal !important; }

/* ---- Focus: always visible on keyboard focus, never suppressed. ---------- */
:focus-visible {
  outline: var(--focus-width) solid var(--colour-focus-ring);
  outline-offset: var(--focus-offset);
}
:focus:not(:focus-visible) { outline: none; }

/* ---- Motion: honour the OS preference. ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* ---- Type utilities: size + the leading that belongs to that size. ------- */
.t-1 { font-size: var(--text-1); line-height: var(--leading-body); }
.t-2 { font-size: var(--text-2); line-height: var(--leading-body); }
.t-3 { font-size: var(--text-3); line-height: var(--leading-body); }
.t-4 { font-size: var(--text-4); line-height: var(--leading-body); }
.t-5 { font-size: var(--text-5); line-height: var(--leading-heading); }
.t-6 { font-size: var(--text-6); line-height: var(--leading-heading); }
.t-7 { font-size: var(--text-7); line-height: var(--leading-heading); }
.t-8 { font-size: var(--text-8); line-height: var(--leading-heading); }
.strong { font-weight: var(--weight-strong); }
.secondary { color: var(--colour-text-secondary); }
.muted { color: var(--colour-text-muted); }
.prose { max-width: var(--measure-prose); }
.prose > * + * { margin-block-start: var(--space-4); }
.prose h2 { font-size: var(--text-6); line-height: var(--leading-heading); font-weight: var(--weight-strong); margin-block-start: var(--space-7); }
.prose h3 { font-size: var(--text-4); line-height: var(--leading-body); font-weight: var(--weight-strong); color: var(--colour-text-secondary); margin-block-start: var(--space-6); }
.prose ul, .prose ol { padding-inline-start: var(--space-5); }
.prose li + li { margin-block-start: var(--space-2); }

/* ---- Numbers, prices, dates: LTR runs, bidi-isolated (RTL_AND_BILINGUAL). --
   Use <bdi dir="ltr" class="num">…</bdi>. The currency mark stays OUTSIDE the
   run so د.ك renders as Arabic text in its natural order. */
.num { unicode-bidi: isolate; direction: ltr; display: inline-block; font-variant-numeric: tabular-nums; }
.money { white-space: nowrap; }

/* ---- Layout utilities --------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.stack > * + * { margin-block-start: var(--space-4); }
.stack-2 > * + * { margin-block-start: var(--space-2); }
.stack-3 > * + * { margin-block-start: var(--space-3); }
.stack-5 > * + * { margin-block-start: var(--space-5); }
.stack-6 > * + * { margin-block-start: var(--space-6); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cluster-3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.visually-hidden { position: absolute; width: var(--hairline); height: var(--hairline); padding: 0; margin: calc(var(--hairline) * -1); overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---- Icons: inline SVG symbols, currentColor. Directional glyphs carry
   data-mirror and flip with the document direction. RTL_AND_BILINGUAL forbids
   scaleX(-1) on LAYOUT (it reverses text and images); a text-free glyph is
   exactly the case the icon mirror list describes. ------------------------ */
.icon { display: inline-block; vertical-align: middle; width: var(--icon-2); height: var(--icon-2); flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-1 { width: var(--icon-1); height: var(--icon-1); }
.icon-3 { width: var(--icon-3); height: var(--icon-3); }
[dir='rtl'] .icon[data-mirror] { transform: scaleX(-1); }