/* الورشة الإسلامية للنجارة — design tokens.
   Source of truth: docs/design-system/ (tokens.json + README.md).
   Load this file first, then components.css. */

/* ---------- Fonts (self-hosted WOFF2, SIL OFL 1.1 — licences in ../fonts/) ---------- */
@font-face{font-family:"Rakkas";src:url("../fonts/Rakkas-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("../fonts/IBMPlexSansArabic-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("../fonts/IBMPlexSansArabic-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("../fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Caslon Text";src:url("../fonts/LibreCaslonText-Variable.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  /* ---------- Colour: core palette ---------- */
  --oud:#542D29;                 /* main: headings, text, logo */
  --machine-green:#485B49;       /* primary button, secondary text */
  --machine-green-deep:#3F5040;  /* primary button hover */
  --shelf-green:#8BA786;         /* decoration, badges — never small text */
  --wood:#8B6B50;                /* rules, icons, text 24px+ only */
  --sawdust:#D8C7A7;             /* stripes, borders, small areas */
  --wall:#C9D2C4;                /* small/medium colour areas */
  --paper:#F7F1E4;               /* cards, business card, print */

  /* ---------- Colour: light backgrounds (site) ---------- */
  --canvas:#FDFBF6;              /* main site background */
  --wall-light:#EAF0E7;          /* alternating sections */
  --sawdust-light:#F4EDDF;       /* contact / CTA section */
  --shelf-light:#DCE7D8;         /* tags */

  /* ---------- Colour: status ---------- */
  --rust:#9A3324;                /* errors only */

  /* ---------- Colour: roles ---------- */
  --ink:var(--oud);
  --ink-muted:var(--machine-green);
  --on-dark:var(--paper);

  /* ---------- Type ---------- */
  --font-display:"Rakkas", serif;                 /* Arabic Primary: headings, name. Never below 24px */
  --font-body:"IBM Plex Sans Arabic", sans-serif; /* Arabic Secondary + English body. 400/500/600 only */
  --font-latin:"Libre Caslon Text", serif;        /* English Primary: English name and titles */

  --text-display:400 64px/1.15 var(--font-display);
  --text-h1:400 44px/1.2 var(--font-display);
  --text-h2:400 32px/1.25 var(--font-display);
  --text-lead:500 20px/1.8 var(--font-body);
  --text-body:400 17px/1.85 var(--font-body);
  --text-label:600 15px/1.6 var(--font-body);
  --text-caption:400 13px/1.6 var(--font-body);
  --text-latin-title:400 32px/1.25 var(--font-latin);
  --text-latin-body:400 17px/1.7 var(--font-body);

  /* ---------- Spacing ---------- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-6:24px;
  --space-8:32px;
  --space-12:48px;
  --space-16:64px;
  --space-24:96px;

  /* ---------- Shape & size ---------- */
  --radius:0px;          /* every edge is a sharp 90° — no rounded corners anywhere */
  --container:1200px;
  --measure:68ch;
  --header-height:72px;
  --tap-min:44px;
  --hairline:1px;
  --plank-edge:3px;
}