/* Bionary Iraq: design-system tokens (copied from bionary-design-system/tokens) plus base resets.
   Achromatic. Two grounds. Hairlines do the separating. Swiss red is a signature, not a palette. */


:root{
  /* colours: every neutral sampled from the logo artwork */
  --ink-000:#040707;
  --ink-900:#0c0f0f;
  --ink-800:#141717;
  --ink-700:#3a3c3c;
  --ink-500:#7f8181;
  --ink-300:#bfbebe;
  --ink-200:#d8d8d8;
  --ink-150:#e3e3e3;
  --ink-050:#f2f2f3;
  --paper:#ffffff;

  --swiss-red:#e1001a;
  --state-critical:#a51220;
  --state-caution:#7d6412;
  --state-clear:#1f5f44;

  --text-primary:var(--ink-000);
  --text-secondary:var(--ink-700);
  --text-muted:var(--ink-500);
  --text-inverse:var(--paper);
  --text-inverse-secondary:var(--ink-300);
  --text-inverse-muted:var(--ink-500);
  --text-link:var(--ink-000);
  --text-link-hover:var(--ink-700);

  --surface-page:var(--paper);
  --surface-sunken:var(--ink-050);
  --surface-card:var(--paper);
  --surface-inverse:var(--ink-000);
  --surface-card-inverse:var(--ink-900);
  --surface-scrim:rgba(4,7,7,.62);

  --border-hairline:var(--ink-150);
  --border-quiet:var(--ink-200);
  --border-strong:var(--ink-000);
  --border-inverse:rgba(255,255,255,.16);
  --border-inverse-strong:rgba(255,255,255,.4);
  --focus-ring:var(--ink-000);
  --focus-ring-inverse:var(--paper);

  --control-solid-bg:var(--ink-000);
  --control-solid-bg-hover:var(--ink-800);
  --control-solid-fg:var(--paper);
  --control-quiet-bg:transparent;
  --control-quiet-bg-hover:var(--ink-050);
  --control-disabled-bg:var(--ink-050);
  --control-disabled-fg:var(--ink-300);

  /* type: IBM Plex Sans Arabic for display (600), body and UI; IBM Plex Mono for every number and code. AD-STOOR lives only in the logo artwork. */
  --font-display:"IBM Plex Sans Arabic",system-ui,"Helvetica Neue",Arial,sans-serif;
  --font-text:"IBM Plex Sans Arabic","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono","IBM Plex Sans Arabic",ui-monospace,SFMono-Regular,Menlo,monospace; /* Plex Mono has no Arabic: Arabic letters fall through to Plex Sans Arabic, digits and Latin stay mono */
  --font-arabic:var(--font-text);

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;

  --type-display-xl:600 72px/1.2 var(--font-display);
  --type-display-l:600 56px/1.22 var(--font-display);
  --type-display-m:600 40px/1.28 var(--font-display);
  --type-display-s:600 28px/1.32 var(--font-display);
  --tracking-display:0;

  --type-title-l:600 32px/1.3 var(--font-text);
  --type-title-m:600 24px/1.35 var(--font-text);
  --type-title-s:600 20px/1.4 var(--font-text);
  --type-body-l:400 18px/1.75 var(--font-text);
  --type-body:400 16px/1.75 var(--font-text);
  --type-body-s:400 14px/1.7 var(--font-text);
  --type-caption:400 12px/1.6 var(--font-text);
  --type-ui:500 14px/1 var(--font-text);
  --type-ui-s:500 12px/1 var(--font-text);

  --type-label:500 11px/1 var(--font-text);
  --tracking-label:0.08em;
  --type-label-mono:400 11px/1 var(--font-mono);
  --tracking-mono-label:0.1em;

  --measure:66ch;
  --measure-narrow:46ch;

  /* spacing: 4px base */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:128px;
  --space-11:192px;

  --gutter:24px;
  --rail-gutter:80px;
  --page-pad:32px;
  --page-max:1320px;
  --section-y:var(--space-9);
  --card-pad:24px;
  --card-pad-lg:32px;
  --control-h:44px;
  --control-h-s:36px;
  --control-h-l:56px;
  --control-pad-x:20px;
  --header-h:72px;

  /* shape: square, a 2px whisper on controls */
  --radius-0:0px;
  --radius-1:2px;
  --radius-2:4px;
  --radius-pill:999px;
  --hairline:1px;
  --rule-strong:2px;
  --shadow-lift:0 1px 2px rgba(4,7,7,.05),0 14px 34px -14px rgba(4,7,7,.16);
  --shadow-modal:0 48px 120px -36px rgba(4,7,7,.5);
  --blur-veil:12px;

  /* motion: short, flat, nothing bounces */
  --ease-standard:cubic-bezier(.2,0,.2,1);
  --ease-entrance:cubic-bezier(0,0,.2,1);
  --ease-exit:cubic-bezier(.4,0,1,1);
  --dur-instant:90ms;
  --dur-fast:140ms;
  --dur-base:220ms;
  --dur-slow:420ms;
  --dur-veil:600ms;
  --transition-control:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard);
}

@media (max-width:720px){
  :root{--page-pad:16px;--section-y:var(--space-8)}
}

/* base resets */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font:var(--type-body);font-family:var(--font-text);text-wrap:pretty;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none;transition:var(--transition-control)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:2px}
.on-ink a:focus-visible,.on-ink button:focus-visible,.on-ink [tabindex]:focus-visible{outline-color:var(--focus-ring-inverse)}
::selection{background:var(--ink-000);color:var(--paper)}
.num{font-family:var(--font-mono);direction:ltr;unicode-bidi:isolate;display:inline-block;font-weight:400}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}