/* Mtheel brand package v1 (green, approved 6 Oct 2026). Source of truth: ../../../mtheel-brand assets and gudlines/tokens/tokens.json
   Same values and alias names as website/assets/css/tokens.css, so the site and the platform cannot drift.
   Fonts are self-hosted from ../fonts (SIL OFL). Tajawal 500 is not in the package, so Arabic uses 400 and 700 only. */
@font-face{font-family:'Tajawal';src:url(../fonts/Tajawal-Regular.ttf) format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Tajawal';src:url(../fonts/Tajawal-Bold.ttf) format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url(../fonts/Archivo-Regular.ttf) format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url(../fonts/Archivo-SemiBold.ttf) format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url(../fonts/SpaceGrotesk-Bold.ttf) format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Josefin Sans';src:url(../fonts/JosefinSans-Light.ttf) format('truetype');font-weight:300;font-style:normal;font-display:swap}

:root{
  /* brand colour (tokens.json) */
  --mtheel-ink:#04302A; --mtheel-ink-body:#1C4A41; --mtheel-ink-muted:#117A5F;
  --mtheel-ice:#F3F9F7; --mtheel-mist:#E4F1EC; --mtheel-surface:#FFFFFF; --mtheel-hairline:#BFDCD3;
  --mtheel-deep:#0A4A3E; --mtheel-accent:#1FA37D; --mtheel-light:#4FC79F; --mtheel-pale:#8FE3C2;
  --mtheel-status-valid:#1F7A4D; --mtheel-status-expiring:#9A5B00; --mtheel-status-expired:#B3261E; --mtheel-status-missing:#6B4FBF;

  /* aliases (same names as the website) */
  --ink:var(--mtheel-ink); --body:var(--mtheel-ink-body); --muted:var(--mtheel-ink-muted);
  --ice:var(--mtheel-ice); --mist:var(--mtheel-mist); --surface:var(--mtheel-surface);
  --hairline:var(--mtheel-hairline); /* 1px dividers and outlines only: never a fill, never text */
  --deep:var(--mtheel-deep); --accent:var(--mtheel-accent); --light:var(--mtheel-light); --pale:var(--mtheel-pale);
  --ok:var(--mtheel-status-valid); --warn:var(--mtheel-status-expiring); --bad:var(--mtheel-status-expired); --miss:var(--mtheel-status-missing);
  /* form field border: ink-muted, 5.29:1 on white (WCAG 1.4.11 needs 3:1) */
  --field:var(--mtheel-ink-muted);
  /* tinted grounds for notices (text on them stays >= 4.5:1: warn 4.85, bad 5.6) */
  --warn-tint:#FBF1E1; --warn-ink:#6B3F00; --bad-tint:#FBECEA;
  --shadow:0 1px 2px rgba(4,48,42,.06),0 10px 22px -14px rgba(4,48,42,.28);

  /* type */
  --f-head:'Space Grotesk',system-ui,sans-serif;
  --f-label:'Josefin Sans',system-ui,sans-serif; /* Latin only */
  --f-body:'Archivo','Tajawal',system-ui,sans-serif;
  --f-ar:'Tajawal',system-ui,sans-serif;          /* every Arabic role; never letter-spaced */
  --f-fig:'Space Grotesk','Archivo',system-ui,sans-serif; /* figures: Western digits in both languages */

  /* space and shape (tokens.json) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s12:48px; --s16:64px;
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-tile:22px; --r-pill:999px;
  --tap:44px;
}