/* Sukun design tokens — derived from "سكون رؤية" strategy deck 2026 */
:root {
  /* Brand */
  --brand: #4A40ED;
  --brand-600: #3F35DE;
  --brand-700: #332BC0;
  --brand-weak: #EEEDFD;
  --brand-weak-2: #E2E0FB;

  /* Neutrals */
  --ink: #111111;
  --ink-soft: #1C1C1F;
  --surface: #FFFFFF;
  --surface-2: #FAFAFB;
  --bg: #F4F4F5;
  --line: #E5E5E8;
  --line-strong: #D4D4D8;
  --text: #111111;
  --muted: #6B7280;
  --muted-strong: #475569;

  /* Status */
  --ok: #047857;
  --ok-weak: #ECFDF5;
  --warn: #B45309;
  --warn-weak: #FFFBEB;
  --danger: #B91C1C;
  --danger-weak: #FEF2F2;
  --info: #1D4ED8;
  --info-weak: #EFF6FF;
  --slate: #475569;
  --slate-weak: #F1F5F9;

  /* Chart series (accessible, brand-led) */
  --c1: #4A40ED;
  --c2: #7C6CF5;
  --c3: #06A0B8;
  --c4: #047857;
  --c5: #B45309;
  --c6: #B91C1C;
  --c7: #475569;
  --c8: #9333EA;

  /* Type */
  --font-ar: "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, sans-serif;
  --font-en: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font: var(--font-ar);
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 4rem;
  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-body: 1.65;

  /* Space */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* Radii / shadow / motion */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;
  --sh-sm: 0 1px 2px rgba(17, 17, 17, 0.06);
  --sh-md: 0 4px 16px rgba(17, 17, 17, 0.07);
  --sh-lg: 0 16px 48px rgba(17, 17, 17, 0.12);
  --dur: 200ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --container: 1200px;
  --sidebar-w: 268px;
  --topbar-h: 68px;

  /* z-scale */
  --z-nav: 10;
  --z-drawer: 20;
  --z-modal: 30;
  --z-toast: 50;
}

html[lang="en"] {
  --font: var(--font-en);
}

/* Dark surface block (deck section dividers / dashboard teaser) */
.on-dark {
  --surface: #1A1A1D;
  --surface-2: #202024;
  --bg: #111111;
  --line: #2A2A2F;
  --line-strong: #3A3A42;
  --text: #FFFFFF;
  --muted: #A1A1AA;
  --muted-strong: #D4D4D8;
  --brand-weak: #23214A;
  color: var(--text);
  background: var(--bg);
}