/* Design tokens: light, dark and Arabic. */
/* =====================================================================
   XBAND DESIGN SYSTEM
   One set of tokens for every screen. Type: 6 sizes, 3 weights.
   Space: 4-based scale. Shape: 3 radii (6 / 12 / 20) plus full round.
   Depth: 2 levels. Colour: neutral surfaces, the XBAND blue scale for
   actions, selection and key data, fixed status colours.
   ===================================================================== */
:root{
  color-scheme:light;
  /* surfaces */
  --bg:#F2F3F6;--surface:#FFFFFF;--surface-2:#F5F6F8;--fill:#E9EBF0;--fill-2:#DEE1E8;--scroll-sh:rgba(16,20,29,.22);
  --line:#E6E8ED;--line-2:#D3D7DF;
  /* text */
  --ink:#0E1424;--ink-2:#3B4354;--ink-3:#5C6577;--ink-4:#8A92A1;
  /* the XBAND blue scale */
  --blue-50:#EEF2FF;--blue-100:#DCE5FF;--blue-200:#BCCDFF;--blue-300:#8FAAFF;--blue-400:#5C84FF;--blue-500:#2A5BFF;--blue-600:#2451E6;--blue-700:#1C40B8;--blue-800:#16318C;--blue-900:#0F2261;--blue-950:#0A1633;
  --accent:var(--blue-500);--accent-ink:var(--blue-600);--accent-soft:var(--blue-50);--accent-line:var(--blue-200);--accent-press:var(--blue-700);--on-accent:#FFFFFF;
  /* status, fixed */
  --ok:#06744C;--ok-soft:#E8F6EF;--ok-fill:#12A06B;
  --warn:#9A5800;--warn-soft:#FFF4E2;--warn-fill:#F5A524;
  --bad:#C8262C;--bad-soft:#FDECEC;--bad-fill:#E5484D;--bad-solid:#C8262C;
  /* the navy hero (Sky Header identity) */
  --navy:#0A1633;--navy-2:#13224A;--navy-3:#1B2D5C;--navy-line:rgba(184,196,224,.16);--on-navy:#FFFFFF;--on-navy-2:#B8C4E0;--on-navy-3:#93A6CF;--navy-accent:#8FB0FF;--on-navy-ok:#7EE2B8;--on-navy-warn:#FFC27A;
  /* charts: blue for the main series, neutrals for the rest */
  --chart-1:#2A5BFF;--chart-2:#8FAAFF;--chart-3:#C9D6FF;--chart-4:#1C40B8;--chart-n1:#8A92A1;--chart-n2:#C3C8D2;--chart-n3:#5C6577;--chart-grid:#E6E8ED;
  --scrim:rgba(10,14,24,.48);
  /* type */
  --font:'Inter','IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-d:'Archivo','Inter','IBM Plex Sans Arabic',system-ui,sans-serif;
  --fs-1:12px;--fs-2:14px;--fs-3:16px;--fs-4:20px;--fs-5:28px;--fs-6:44px;--fs-7:56px;
  --fw-1:400;--fw-2:600;--fw-3:800;
  --lh-d:1;--lh-t:1.25;--lh-b:1.45;
  --tr-d:-.01em;--tr-t:-.02em;--tr-l:.06em;
  --d-wdth:72;
  /* space */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;
  /* shape */
  --r-1:6px;--r-2:12px;--r-3:20px;--r-pill:999px;
  /* depth: level 1 floats over content, level 2 covers it */
  --elev-1:0 1px 2px rgba(14,20,36,.06),0 8px 20px -8px rgba(14,20,36,.14);
  --elev-2:0 24px 56px -16px rgba(14,20,36,.32),0 6px 16px -6px rgba(14,20,36,.12);
  --edge:transparent;
  /* control sizes */
  --h-ctl:48px;--h-ctl-s:36px;--tap:44px;
  /* motion */
  --t-1:150ms;--t-2:200ms;--t-3:300ms;--t-x2:150ms;--t-x3:200ms;
  /* one easing curve for every enter and exit; exits are shorter, not differently curved */
  --ease:cubic-bezier(0.2,0,0,1);--ease-out:var(--ease);--ease-in:var(--ease);
  /* layers: toast above modal above navigation */
  --z-sticky:10;--z-nav:20;--z-float:30;--z-over:40;--z-pop:60;--z-toast:80;--z-tour:90;
  /* layout */
  --nav-h:64px;--side-w:248px;--gutter:16px;--page-max:1160px;--read-max:760px;
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
  /* body twin stage */
  --tw-bg:#0A1633;--tw-ink:#FFFFFF;--tw-mute:#9FB3D1;--tw-lk:#A9BEDF;--tw-line:rgba(147,197,253,.2);--tw-on:#E6F0FF;--tw-on-ink:#07122A;--tw-lbg:#06122B;--tw-acc:#8FB0FF;
}
/* dark mode: its own layered surfaces, not an inverted light mode */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#07090E;--surface:#10141D;--surface-2:#171C27;--fill:#1F2533;--fill-2:#283042;--scroll-sh:rgba(0,0,0,.6);--line:#1D2331;--line-2:#2D3546;
  --ink:#EEF1F7;--ink-2:#C1C8D6;--ink-3:#959EB0;--ink-4:#6B7385;
  --accent:#2A5BFF;--accent-ink:#89A7FF;--accent-soft:#16203D;--accent-line:#2A3B6E;--accent-press:#1C40B8;
  --ok:#3FD19A;--ok-soft:#0E2A20;--ok-fill:#2BB880;--warn:#F2B24C;--warn-soft:#2E2210;--warn-fill:#F5A524;--bad:#FF7A75;--bad-soft:#33171A;--bad-fill:#F2555A;--bad-solid:#D32F35;
  --navy:#0E1A3C;--navy-2:#16254E;--navy-3:#1E305F;--navy-line:rgba(184,196,224,.14);
  --chart-1:#5C84FF;--chart-2:#3A56A8;--chart-3:#24356B;--chart-4:#A9C0FF;--chart-n1:#6B7385;--chart-n2:#3A4254;--chart-n3:#9AA3B5;--chart-grid:#1D2331;
  --scrim:rgba(0,0,0,.64);--elev-1:none;--elev-2:none;--edge:#2D3546;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#07090E;--surface:#10141D;--surface-2:#171C27;--fill:#1F2533;--fill-2:#283042;--scroll-sh:rgba(0,0,0,.6);--line:#1D2331;--line-2:#2D3546;
  --ink:#EEF1F7;--ink-2:#C1C8D6;--ink-3:#959EB0;--ink-4:#6B7385;
  --accent:#2A5BFF;--accent-ink:#89A7FF;--accent-soft:#16203D;--accent-line:#2A3B6E;--accent-press:#1C40B8;
  --ok:#3FD19A;--ok-soft:#0E2A20;--ok-fill:#2BB880;--warn:#F2B24C;--warn-soft:#2E2210;--warn-fill:#F5A524;--bad:#FF7A75;--bad-soft:#33171A;--bad-fill:#F2555A;--bad-solid:#D32F35;
  --navy:#0E1A3C;--navy-2:#16254E;--navy-3:#1E305F;--navy-line:rgba(184,196,224,.14);
  --chart-1:#5C84FF;--chart-2:#3A56A8;--chart-3:#24356B;--chart-4:#A9C0FF;--chart-n1:#6B7385;--chart-n2:#3A4254;--chart-n3:#9AA3B5;--chart-grid:#1D2331;
  --scrim:rgba(0,0,0,.64);--elev-1:none;--elev-2:none;--edge:#2D3546;
}}
/* Arabic: IBM Plex Sans Arabic carries display and text; sizes stay on the same scale */
[dir=rtl]{--font:'IBM Plex Sans Arabic','Inter',system-ui,sans-serif;--font-d:'IBM Plex Sans Arabic','Archivo','Inter',sans-serif;--tr-d:0;--tr-t:0;--tr-l:0;--lh-d:1.25;--lh-t:1.4;--lh-b:1.6}
