/* ==========================================================================
   salamnoor — base
   Fonts, reset, document, layout primitives, typography.
   Consumes tokens.css. Declares no colour literals.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts. Self-hosted, subset by unicode-range so an English page never
   downloads an Arabic face even though both are declared here. Latin is one
   variable file covering 100-700; Arabic ships two static weights.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../fonts/plexsans-latin-100-700.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../fonts/plexsans-latin-ext-100-700.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plexarab-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/plexarab-arabic-600.woff2") format("woff2");
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/plexarab-arabic-700.woff2") format("woff2");
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

:where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol) {
  margin: 0;
}
:where(ul[class], ol[class]) { list-style: none; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background-color: var(--sn-canvas);
  color: var(--sn-ink);
  font-family: var(--sn-font-sans);
  font-size: var(--sn-fs-md);
  line-height: var(--sn-lh-body);
  font-weight: var(--sn-wt-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-wrap: break-word;
}

/* Arabic gets the Arabic face first in the stack. The optical scale and
   leading come from the :lang() blocks in tokens.css. */
:lang(ar) {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", var(--sn-font-sans);
}

img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--sn-selection-bg); color: var(--sn-selection-ink); }

/* --------------------------------------------------------------------------
   3. Focus — a two-ring indicator. A single ring in the brand colour vanishes
   against a brand-filled surface, so ring + halo guarantees one of the pair
   always clears 3:1.
   -------------------------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--sn-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--sn-focus-halo);
  border-radius: var(--sn-radius-xs);
}

/* --------------------------------------------------------------------------
   4. Skip link — off-screen until focused.
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  inset-inline-start: var(--sn-space-sm);
  inset-block-start: -100vh;
  z-index: var(--sn-z-skiplink);
  padding: var(--sn-space-2xs) var(--sn-space-sm);
  background: var(--sn-brand-fill);
  color: var(--sn-on-brand-fill);
  border-radius: var(--sn-radius-sm);
  font-size: var(--sn-fs-sm);
  font-weight: var(--sn-wt-semibold);
  text-decoration: none;
}
.skip-link:focus-visible {
  inset-block-start: var(--sn-space-sm);
}

.screen-reader-text, .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   5. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--sn-w-content);
  margin-inline: auto;
  padding-inline: var(--sn-gutter);
}
.container--prose { max-width: var(--sn-w-prose); }
.container--wide  { max-width: var(--sn-w-wide); }

.site-main {
  flex: 1 0 auto;
  padding-block: var(--sn-space-2xl);
}

/* --------------------------------------------------------------------------
   6. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--sn-wt-semibold);
  line-height: var(--sn-lh-heading);
  letter-spacing: var(--sn-track-tight);
  text-wrap: balance;
  color: var(--sn-ink);
}
h1 { font-size: var(--sn-fs-4xl); font-weight: var(--sn-wt-bold); }
h2 { font-size: var(--sn-fs-3xl); }
h3 { font-size: var(--sn-fs-2xl); }
h4 { font-size: var(--sn-fs-xl); }
h5 { font-size: var(--sn-fs-lg); }
h6 { font-size: var(--sn-fs-md); letter-spacing: var(--sn-track-wide); text-transform: uppercase; }

a {
  color: var(--sn-brand);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--sn-brand-hover); }

strong, b { font-weight: var(--sn-wt-semibold); }
small { font-size: var(--sn-fs-sm); }
code, pre, kbd, samp { font-family: var(--sn-font-mono); font-size: 0.9em; }

/* --------------------------------------------------------------------------
   7. Prose — the only place where bare element selectors get vertical rhythm.
   Re-asserts font-size and line-height from tokens so a nested lang="en"
   block inside an Arabic document actually picks up the Latin metrics.
   -------------------------------------------------------------------------- */
.prose {
  max-width: var(--sn-w-prose);
  font-size: var(--sn-fs-md);
  line-height: var(--sn-lh-body);
  color: var(--sn-ink-2);
  display: flow-root;
}
.prose > * + * { margin-block-start: var(--sn-space-md); }
.prose > * + :is(h2, h3, h4) { margin-block-start: var(--sn-space-xl); }
.prose :is(h2, h3, h4) { color: var(--sn-ink); }
.prose :is(ul, ol) { padding-inline-start: 1.4em; }
.prose li + li { margin-block-start: var(--sn-space-3xs); }
.prose img, .prose figure { border-radius: var(--sn-radius-md); }
.prose figcaption {
  font-size: var(--sn-fs-sm);
  color: var(--sn-ink-3);
  margin-block-start: var(--sn-space-2xs);
}
.prose blockquote {
  margin-inline: 0;
  padding-inline-start: var(--sn-space-md);
  border-inline-start: 3px solid var(--sn-border-accent);
  color: var(--sn-ink-2);
  font-size: var(--sn-fs-lg);
}
.prose hr {
  border: 0;
  border-block-start: 1px solid var(--sn-line);
  margin-block: var(--sn-space-xl);
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--sn-fs-sm);
  font-variant-numeric: tabular-nums;
}
.prose :is(th, td) {
  text-align: start;
  padding: var(--sn-space-2xs) var(--sn-space-xs);
  border-block-end: 1px solid var(--sn-line);
}
.prose th { font-weight: var(--sn-wt-semibold); }

/* Wide content must scroll inside itself, never the page body. */
.prose :is(pre, table) { overflow-x: auto; }
.prose pre {
  background: var(--sn-surface-2);
  padding: var(--sn-space-sm);
  border-radius: var(--sn-radius-md);
}