/* نظام الكحلي والذهبي — generated from tokens.json */
:root, [data-theme="light"] {
  --navy: #071a33;
  --navy-2: #0b294e;
  --navy-3: #123a6b;
  --navy-deep: #061428;
  --navy-hover: rgba(255, 255, 255, 0.06);
  --navy-rule: rgba(255, 255, 255, 0.08);
  --navy-rule-2: rgba(255, 255, 255, 0.18);
  --ghost-line: rgba(255, 255, 255, 0.35);
  --on-navy: #ffffff;
  --on-navy-2: #c9d5e4;
  --on-navy-muted: #9fb3c8;
  --on-navy-faint: #8fa6bf;
  --gold: #c6a15b;
  --gold-2: #e2c584;
  --gold-hover: #d6b26c;
  --gold-ink: #8d6828;
  --gold-soft: #f7eedc;
  --gold-line: #ebdcbe;
  --gold-rule: rgba(198, 161, 91, 0.28);
  --gold-wash: rgba(198, 161, 91, 0.14);
  --paper: #f5f7fb;
  --panel: #ffffff;
  --ink: #13243b;
  --ink-2: #2c3d52;
  --muted: #5f6d7c;
  --line: #e2e8f0;
  --line-strong: #c5d1df;
  --input-line: #cfd8e3;
  --neutral-soft: #f1f4f8;
  --link: var(--navy-3);
  --field-focus: var(--navy-3);
  --selected: var(--navy);
  --on-selected: #ffffff;
  --selected-count: var(--gold);
  --live: #2f9e6b;
  --live-dot: #3ccf8e;
  --live-ink: #1e7a50;
  --live-soft: #e5f4ec;
  --live-line: #bfe3cf;
  --tint: #eef3f9;
  --tint-ink: #123a6b;
  --tint-line: #c9d8ea;
  --danger: #b42318;
  --danger-ink: #8a1f1f;
  --danger-soft: #fdecec;
  --danger-line: #f3c2c2;
  --focus: var(--gold);
  --scrim: rgba(4, 14, 28, 0.92);
  --glow-navy: rgba(18, 58, 107, 0.9);
  --glow-gold: rgba(198, 161, 91, 0.13);
  --glow-blue: rgba(27, 74, 133, 0.35);
  --shadow-focus: 0 0 0 3px rgba(18, 58, 107, 0.12);
  --shadow-float: 0 30px 70px rgba(0, 0, 0, 0.3);
  --shadow-feature: 0 18px 44px rgba(7, 26, 51, 0.16);
  --shadow-thumb: 0 2px 10px rgba(7, 26, 51, 0.08);
  --shadow-board: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] {
  --gold-ink: #e2c584;
  --gold-soft: #2a2414;
  --gold-line: #4a3d22;
  --paper: #06121f;
  --panel: #0b1d33;
  --ink: #e6edf6;
  --ink-2: #c9d5e4;
  --muted: #9fb0c3;
  --line: #1e3654;
  --line-strong: #4f6c92;
  --input-line: #56739a;
  --neutral-soft: #13253d;
  --link: var(--gold-2);
  --field-focus: var(--gold-2);
  --selected: var(--gold);
  --on-selected: var(--navy);
  --selected-count: var(--navy-2);
  --live-ink: #6fd3a3;
  --live-soft: #0f2e22;
  --live-line: #1d4d38;
  --tint: #12294a;
  --tint-ink: #c9d8ea;
  --tint-line: #24456e;
  --danger: #ff8a80;
  --danger-ink: #ff9b94;
  --danger-soft: #3a1414;
  --danger-line: #6b2626;
  --focus: var(--gold);
  --shadow-focus: 0 0 0 3px rgba(226, 197, 132, 0.18);
}
:root {
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-22: 22px;
  --space-24: 24px;
  --space-28: 28px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --radius-focus: 4px;
  --radius-tag: 6px;
  --radius-nav: 8px;
  --radius-control: 10px;
  --radius-tile: 12px;
  --r: 14px;
  --radius-panel: 16px;
  --radius-feature: 18px;
  --radius-pill: 30px;
  --wrap: 1180px;
  --wrap-narrow: 720px;
  --bar-h: 66px;
  --btn-h: 46px;
  --btn-h-sm: 38px;
  --field-h: 40px;
  --icon-tile: 44px;
  --logo-h: 46px;
  --font-display: "Noto Kufi Arabic", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
}
.display { font-family: var(--font-display); font-size: 50px; line-height: 1.35; font-weight: 800; letter-spacing: -0.01em; }
.title-1 { font-family: var(--font-display); font-size: 40px; line-height: 1.35; font-weight: 800; }
.title-2 { font-family: var(--font-display); font-size: 32px; line-height: 1.35; font-weight: 800; }
.title-3 { font-family: var(--font-display); font-size: 26px; line-height: 1.35; font-weight: 700; }
.heading { font-family: var(--font-display); font-size: 20px; line-height: 1.35; font-weight: 700; }
.card-title { font-family: var(--font-display); font-size: 18px; line-height: 1.35; font-weight: 700; }
.subhead { font-family: var(--font-display); font-size: 16px; line-height: 1.35; font-weight: 700; }
.lead { font-family: var(--font-body); font-size: 18px; line-height: 1.8; font-weight: 400; }
.prose { font-family: var(--font-body); font-size: 17px; line-height: 1.95; font-weight: 400; }
.body { font-family: var(--font-body); font-size: 16px; line-height: 1.8; font-weight: 400; }
.button { font-family: var(--font-body); font-size: 15.5px; line-height: 1.3; font-weight: 600; }
.body-sm { font-family: var(--font-body); font-size: 14.5px; line-height: 1.75; font-weight: 400; }
.small { font-family: var(--font-body); font-size: 13.5px; line-height: 1.8; font-weight: 400; }
.label { font-family: var(--font-body); font-size: 12.5px; line-height: 1.8; font-weight: 600; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/plex-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/plex-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/plex-arabic-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/plex-arabic-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Kufi Arabic"; src: url("../fonts/noto-kufi-arabic-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Kufi Arabic"; src: url("../fonts/noto-kufi-arabic-700-800.woff2") format("woff2"); font-weight: 700 800; font-style: normal; font-display: swap; }