/* ==========================================================================
   Design tokens — extracted from the Abqari Figma file (local + DS variables)
   ========================================================================== */
@font-face{font-family:"DIN Next Arabic";src:url("../assets/fonts/DINNextArabic-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
/* Medium also serves 500–600: the design's "Semibold" maps to Medium */
@font-face{font-family:"DIN Next Arabic";src:url("../assets/fonts/DINNextArabic-Medium.woff2") format("woff2");font-weight:500 600;font-display:swap}
@font-face{font-family:"DIN Next Arabic";src:url("../assets/fonts/DINNextArabic-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"DIN Next Arabic";src:url("../assets/fonts/DINNextArabic-Heavy.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"DIN Next Arabic";src:url("../assets/fonts/DINNextArabic-Black.woff2") format("woff2");font-weight:900;font-display:swap}

:root{
  /* Color — Primary */
  --color-primary-10:#f5f8fe;       /* lightest blue tint, near white */
  --color-primary-25:#e6ecfd;
  --color-primary-50:#b3c5f8;
  --color-primary-100:#809ef4;
  --color-primary:#013de9;          /* Primary/500 */
  --color-primary-600:#0023cf;
  --color-primary-700:#000083;
  /* Secondary / Tertiary */
  --color-secondary-25:#fff5e7;
  --color-secondary:#ff9a0e;
  --color-secondary-800:#993400;
  --color-tertiary-25:#e5f6f6;
  --color-tertiary-700:#007575;
  /* Neutral / surfaces */
  --color-neutral-100:#f3f3f3;
  --color-neutral-200:#ececec;
  --color-background:#ffffff;
  --color-surface:#ffffff;
  --color-surface-muted:#f3f3f3;
  --color-border:#ececec;
  --color-text:#141414;
  --color-text-muted:#606060;
  --color-text-disabled:#adadad;
  --color-on-primary:#ffffff;
  --color-focus:#013de9;
  /* Semantic */
  --color-success-bg:#dff6dd; --color-success:#107c10;
  --color-warning-bg:#fff4ce; --color-warning:#993400;
  --color-error-bg:#fde7e9;   --color-error:#d30000;
  --color-info-bg:#cce0f0;    --color-info:#0065b3;
  --color-toast-success:#3a7e55;  /* success toast background */
  --color-scrim:rgba(20,20,20,.45);

  /* Typography */
  --font-family:"DIN Next Arabic","Segoe UI",Tahoma,system-ui,sans-serif;
  --fw-regular:400; --fw-medium:500; --fw-semibold:500; /* Semibold → Medium */ --fw-bold:700; --fw-heavy:800; --fw-black:900;
  --fs-page-title:20px; --lh-page-title:30px;   /* mobile first; 28/40 from tablet */
  --fs-h1:24px; --lh-h1:34px;
  --fs-h2:20px; --lh-h2:30px;
  --fs-h3:18px; --lh-h3:28px;
  --fs-body-lg:16px; --lh-body-lg:26px;
  --fs-body-md:15px; --lh-body-md:24px;
  --fs-body-sm:14px; --lh-body-sm:22px;
  --fs-caption:12px; --lh-caption:18px;
  --fs-micro:10px; --lh-micro:14px;
  --fs-stat:24px; --lh-stat:34px;

  /* Radius (Figma: Radius (Local)) */
  --radius-card:12px; --radius-table:12px; --radius-popup:12px;
  --radius-textarea:12px; --radius-sm:6px; --radius-md:10px;
  --radius-input:999px; --radius-dropdown:999px; --radius-button:999px; --radius-full:999px;

  /* Stroke (Figma: Stroke (Local)) */
  --border-default:1px; --border-emphasis:1px; --border-focus:1px; --border-radio:6px;
  --icon-stroke:1.5;

  /* Size (Figma: Size (Local)) */
  --size-control:44px;
  --sidebar-width:256px; --rail-width:88px;
  --topbar-height:64px;

  /* Spacing scale */
  --spacing-2xs:4px; --spacing-xs:8px; --spacing-sm:12px; --spacing-md:16px;
  --spacing-lg:20px; --spacing-xl:24px; --spacing-2xl:28px; --spacing-3xl:32px; --spacing-4xl:40px;

  /* Layout */
  --page-padding-x:16px;
  --content-max-width:1376px;
  --card-padding:16px;

  /* Elevation */
  --shadow-popup:0 12px 32px rgba(13,26,77,.14);

  /* Motion */
  --transition-fast:120ms ease; --transition:200ms ease;
}
@media (min-width:768px){ :root{ --page-padding-x:24px; --card-padding:20px; --fs-page-title:24px; --lh-page-title:34px; } }
@media (min-width:1280px){ :root{ --page-padding-x:32px; --topbar-height:72px; --card-padding:24px; --fs-page-title:28px; --lh-page-title:40px; --fs-stat:28px; --lh-stat:40px; } }