/* ═══════════════════════════════════════════════════════════════
   JUDGY — design tokens
   Locked decisions, do not revisit:
   · Black dominant (~75%), white (~25%), #32e994 the ONLY accent.
   · Neutrals are achromatic — white at reduced opacity, never tinted
     greys. Anything with a colour cast is wrong.
   · Zero border radius, everywhere, no exceptions.
   · Light sections use bone #f2f2ef, never pure white.
   · No monospace anywhere. Labels are the display face, 500, wide
     tracking, uppercase.
   ═══════════════════════════════════════════════════════════════ */

/* ── FONT STACK ──────────────────────────────────────────────────
   Milner (EN) and Htmoshreqpro (AR) are not on any CDN and were not
   supplied as files, so they head each stack and Archivo / IBM Plex
   Sans Arabic stand in until the real files land. Drop the
   @font-face blocks in fonts.css and nothing else changes.        */

:root {
  --fd: 'Milner', 'Archivo', system-ui, sans-serif;   /* display / EN */
  --fa: 'Htmoshreqpro', 'IBM Plex Sans Arabic', sans-serif; /* AR */
  --fm: var(--fd);        /* label face = display face. No mono anywhere. */

  /* ── COLOUR ── */
  --ink: #000;
  --paper: #fff;
  --bone: #f2f2ef;        /* light sections — not pure white */

  --w92: rgba(255, 255, 255, .92);
  --w64: rgba(255, 255, 255, .64);
  --w40: rgba(255, 255, 255, .4);
  --w24: rgba(255, 255, 255, .24);
  --w16: rgba(255, 255, 255, .16);
  --w06: rgba(255, 255, 255, .06);

  --k64: rgba(0, 0, 0, .64);
  --k40: rgba(0, 0, 0, .4);
  --k16: rgba(0, 0, 0, .16);
  --k06: rgba(0, 0, 0, .06);

  --g: #32e994;           /* the accent — active, hover, CTA, focus, numbers */
  --gd: #0b7a4e;          /* the accent, darkened, for use on bone           */

  /* ── LABEL TEXT ──────────────────────────────────────────────
     The build these tokens came from set small uppercase labels at
     white .24 (1.93:1) and .40 (3.66:1) on black, and black .40 on
     bone (2.82:1). All three fail WCAG AA for text at that size.
     These two are the faintest values that still clear 4.5:1, so the
     labels read as quietly as they did and are legible to everyone.
     They are used for TEXT only — --w24, --w16 and --k16 still carry
     the hairline rules and borders, where no ratio is required.
     To go back to the original weights, set --wlab: var(--w24) and
     --klab: var(--k40) here and nothing else changes.              */
  --wlab: rgba(255, 255, 255, .46);
  --klab: rgba(0, 0, 0, .56);

  /* ── SPACE ── */
  --gut: clamp(1.5rem, 4.5vw, 5.5rem);   /* page gutter — no max-width container */
  --pad: clamp(7rem, 13vw, 15rem);       /* section rhythm — big on purpose      */

  /* ── MOTION ── */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur: 440ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; }
}

/* ── ARABIC ──────────────────────────────────────────────────────
   Not a translation and not a mirrored layout. Zero letter-spacing
   (negative tracking breaks the joins), looser leading, ~6% larger
   at the same optical size, never justified.                      */
[lang="ar"],
[dir="rtl"],
.ar {
  font-family: var(--fa);
  letter-spacing: 0 !important;
  line-height: 1.75;
  text-align: start;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] .fbig,
[dir="rtl"] .th,
[dir="rtl"] .ph {
  letter-spacing: 0 !important;
  line-height: 1.16;
}

[dir="rtl"] body { font-size: 1.125rem; }  /* ~6% larger at the same optical size */
[dir="rtl"] .eye,
[dir="rtl"] .pc-n,
[dir="rtl"] .stat,
[dir="rtl"] .svp,
[dir="rtl"] .ldn,
[dir="rtl"] .ldi,
[dir="rtl"] .fest,
[dir="rtl"] .hcap { letter-spacing: 0 !important; }

/* Kashida (U+0640) is inserted by hand on display headlines only. It is
   real text, so it never reaches <title>, meta, JSON-LD or alt — those
   read the clean string. See src/lib/text.ts. */