/* ── Fonts ──────────────────────────────────────────────────────────────
   Arabic has exactly two weights. graphik-light.ttf is internally named
   "Graphik Arabic Medium", and extra-bold duplicates bold byte-for-byte,
   so Medium (500) and Bold (700) are the whole Arabic palette. Anything
   asking for 300 or 600 in Arabic resolves to the nearest of these two. */

@font-face {
  font-family: "Graphik Arabic";
  src: url("/assets/fonts/graphik-ar-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Graphik Arabic";
  src: url("/assets/fonts/graphik-ar-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────────────────────── */

:root {
  /* Canonical brand palette — WENSA_BRAND_SKILL.md §3. Do not invent values. */
  --paper: #FBFAF8;
  --ink: #18262B;
  --subink: #6C7A7E;
  --teal: #3490A2;
  --orange: #FF6F3C;
  --yellow: #FFD93D;

  --teal-soft: color-mix(in srgb, var(--teal) 10%, var(--paper));
  --line: color-mix(in srgb, var(--ink) 12%, transparent);

  --font-ar: "Graphik Arabic", "IBM Plex Sans", system-ui, sans-serif;
  --font-en: "IBM Plex Sans", system-ui, sans-serif;
  --font: var(--font-ar);

  /* Fluid type: 320px → 1440px viewport (scaled to ~76% of the original ramp) */
  --step--1: clamp(0.64rem, 0.6rem + 0.14vw, 0.72rem);
  --step-0: clamp(0.77rem, 0.71rem + 0.27vw, 0.91rem);
  --step-1: clamp(0.92rem, 0.82rem + 0.46vw, 1.15rem);
  --step-2: clamp(1.11rem, 0.96rem + 0.73vw, 1.45rem);
  --step-3: clamp(1.33rem, 1.1rem + 1.15vw, 1.84rem);
  --step-4: clamp(1.58rem, 1.22rem + 1.8vw, 2.32rem);
  --step-5: clamp(1.9rem, 1.34rem + 2.81vw, 3.44rem);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  --wrap: 1200px;
  --radius: 20px;
  --radius-sm: 12px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: 68px;
}

/* Arabic ink runs taller than its nominal metrics, so it needs a slightly
   looser line-height than the Latin stack to avoid ascender collisions. */
[lang="ar"] {
  --font: var(--font-ar);
  --lh-tight: 1.35;
  --lh-body: 1.85;
}

[lang="en"] {
  --font: var(--font-en);
  --lh-tight: 1.15;
  --lh-body: 1.65;
}

/* ── Reset ──────────────────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 500;
  font-size: var(--step-0);
  line-height: var(--lh-body);
  overflow-x: clip;
}

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

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

h1, h2, h3 { font-weight: 700; line-height: var(--lh-tight); text-wrap: balance; }

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }

p { text-wrap: pretty; }

:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 4px; }

/* ── Utilities ──────────────────────────────────────────────────────── */

.u-wrap {
  width: min(100% - 2 * var(--space-3), var(--wrap));
  margin-inline: auto;
}

.u-eyebrow {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--teal);
  text-transform: uppercase;
}

[lang="ar"] .u-eyebrow { letter-spacing: 0; text-transform: none; }

.u-sub {
  color: var(--subink);
  font-size: var(--step-1);
  max-width: 52ch;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}