/* CIYAJ — generated from tokens.json */
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("fonts/ibm-plex-sans-arabic-arabic-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("fonts/ibm-plex-sans-arabic-arabic-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("fonts/ibm-plex-sans-arabic-arabic-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Sora"; src: url("fonts/sora-latin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Kufi Arabic"; src: url("fonts/noto-kufi-arabic-arabic-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
:root, [data-theme="light"] {
  --surface: var(--stone-25);
  --surface-raised: var(--stone-0);
  --surface-sunken: var(--stone-50);
  --surface-brand: var(--evergreen-900);
  --shell-hover: #11372a;
  --shell-active: #164532;
  --line: var(--stone-200);
  --line-strong: #87918b;
  --ink: var(--stone-900);
  --ink-muted: var(--stone-600);
  --ink-subtle: var(--stone-500);
  --on-brand: var(--stone-0);
  --on-brand-muted: var(--evergreen-300);
  --brand: var(--evergreen-900);
  --brand-soft: var(--evergreen-50);
  --brand-accent: var(--brass-500);
  --brand-accent-ink: var(--brass-700);
  --action: var(--evergreen-700);
  --action-hover: var(--evergreen-800);
  --on-action: var(--stone-0);
  --link: var(--evergreen-600);
  --focus: var(--evergreen-500);
  --status-implemented: #0e8a6a;
  --status-implemented-ink: #0b6e55;
  --status-implemented-soft: #e0f3ec;
  --status-partial: #c48400;
  --status-partial-ink: #8a5a00;
  --status-partial-soft: #fcf0d2;
  --status-not-implemented: #a8360a;
  --status-not-implemented-ink: #97300a;
  --status-not-implemented-soft: #fbe6d9;
  --status-not-applicable: #7f8a84;
  --status-not-applicable-ink: var(--stone-600);
  --status-not-applicable-soft: var(--stone-100);
  --status-not-assessed: #87918b;
  --info: #0072b2;
  --info-ink: #005a8c;
  --info-soft: #e1eff8;
  --band-compliant: #0e8a6a;
  --band-substantial: #2b8cc4;
  --band-partial: #c48400;
  --band-low: #a8360a;
  --risk-1: #d3ede1;
  --risk-2: #9bd3b8;
  --risk-3: #f0bc4e;
  --risk-4: #e07a35;
  --risk-5: #a93a16;
  --on-risk: var(--stone-900);
  --on-risk-strong: var(--stone-0);
  --evergreen-50: #f1f7f3;
  --evergreen-100: #dfeee5;
  --evergreen-200: #bfdccb;
  --evergreen-300: #8fc1a6;
  --evergreen-400: #5a9f7f;
  --evergreen-500: #2f7f5d;
  --evergreen-600: #1e6a4b;
  --evergreen-700: #16573d;
  --evergreen-800: #10402d;
  --evergreen-900: #0b2a1a;
  --evergreen-950: #061710;
  --brass-100: #f6edd5;
  --brass-200: #ebd7a3;
  --brass-300: #ddbc6a;
  --brass-500: #c8992a;
  --brass-600: #a67c1c;
  --brass-700: #7e5d12;
  --stone-0: #ffffff;
  --stone-25: #fafbfa;
  --stone-50: #f4f6f4;
  --stone-100: #eaeeeb;
  --stone-200: #d9dfdb;
  --stone-300: #bcc5bf;
  --stone-400: #939e97;
  --stone-500: #6d7871;
  --stone-600: #535d57;
  --stone-700: #3d4641;
  --stone-800: #28302c;
  --stone-900: #171d1a;
  --stone-950: #0c110e;
  --night-950: #070e0b;
  --night-900: #0a1310;
  --night-850: #111c17;
  --night-800: #182520;
  --night-700: #24332c;
  --night-600: #5e6f66;
  --night-400: #84938b;
  --night-300: #a3b2aa;
  --night-100: #e8efeb;
  --shadow-sm: 0 1px 2px #171d1a0f, 0 1px 3px #171d1a14;
  --shadow-md: 0 2px 4px #171d1a0f, 0 8px 20px -4px #171d1a1f;
  --shadow-lg: 0 4px 8px #171d1a14, 0 24px 48px -12px #171d1a33;
  --focus-ring: 0 0 0 2px #fafbfa, 0 0 0 4px #2f7f5d;
}
[data-theme="dark"] {
  --surface: var(--night-900);
  --surface-raised: var(--night-850);
  --surface-sunken: var(--night-950);
  --surface-brand: #0b2219;
  --shell-hover: #102e23;
  --shell-active: #143a2c;
  --line: var(--night-700);
  --line-strong: var(--night-600);
  --ink: var(--night-100);
  --ink-muted: var(--night-300);
  --ink-subtle: var(--night-400);
  --on-brand: var(--night-100);
  --on-brand-muted: var(--night-400);
  --brand: var(--evergreen-300);
  --brand-soft: #10261d;
  --brand-accent: var(--brass-300);
  --brand-accent-ink: var(--brass-300);
  --action: var(--evergreen-300);
  --action-hover: var(--evergreen-200);
  --on-action: var(--evergreen-950);
  --link: var(--evergreen-300);
  --focus: var(--evergreen-300);
  --status-implemented: #2dbf94;
  --status-implemented-ink: #58d3ae;
  --status-implemented-soft: #0d2b22;
  --status-partial: #f2b53a;
  --status-partial-ink: #f5c463;
  --status-partial-soft: #33260a;
  --status-not-implemented: #f07a2e;
  --status-not-implemented-ink: #f69a5e;
  --status-not-implemented-soft: #3a1c0b;
  --status-not-applicable: var(--stone-500);
  --status-not-applicable-ink: #a5b0a9;
  --status-not-applicable-soft: #1b2520;
  --status-not-assessed: var(--night-600);
  --info: #56b4e9;
  --info-ink: #8ccdf0;
  --info-soft: #0b2333;
  --band-compliant: #2dbf94;
  --band-substantial: #56b4e9;
  --band-partial: #f2b53a;
  --band-low: #f07a2e;
  --shadow-sm: 0 1px 2px #00000066;
  --shadow-md: 0 8px 20px -4px #000000a6;
  --shadow-lg: 0 24px 48px -12px #000000cc;
  --focus-ring: 0 0 0 2px #0a1310, 0 0 0 4px #8fc1a6;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-full: 9999px;
  --control-sm: 28px;
  --control-md: 36px;
  --control-lg: 44px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --sidebar-width: 248px;
  --sidebar-collapsed: 64px;
  --content-max: 1280px;
  --reading-max: 720px;
  --font-sans: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, "Segoe UI", sans-serif;
  --font-display: "Sora", "Noto Kufi Arabic", "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
.display-xl { font-family: var(--font-display); font-size: 56px; line-height: 60px; font-weight: 600; letter-spacing: -0.02em; }
.display-lg { font-family: var(--font-display); font-size: 40px; line-height: 46px; font-weight: 600; letter-spacing: -0.015em; }
.display-md { font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.01em; }
.metric { font-family: var(--font-display); font-size: 36px; line-height: 40px; font-weight: 600; letter-spacing: -0.01em; }
.title-lg { font-family: var(--font-sans); font-size: 24px; line-height: 32px; font-weight: 600; }
.title-md { font-family: var(--font-sans); font-size: 18px; line-height: 26px; font-weight: 600; }
.title-sm { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 600; }
.body-lg { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 14px; line-height: 22px; font-weight: 400; }
.body-strong { font-family: var(--font-sans); font-size: 14px; line-height: 22px; font-weight: 600; }
.label { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 500; }
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 400; }
.overline { font-family: var(--font-sans); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; }
.title-lg-ar { font-family: var(--font-arabic); font-size: 24px; line-height: 38px; font-weight: 600; }
.title-sm-ar { font-family: var(--font-arabic); font-size: 16px; line-height: 26px; font-weight: 600; }
.body-ar { font-family: var(--font-arabic); font-size: 15px; line-height: 26px; font-weight: 400; }
.label-ar { font-family: var(--font-arabic); font-size: 14px; line-height: 20px; font-weight: 500; }
.code { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 400; }
.code-strong { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 500; }