:root {
  --primary-50: #fff3e6;
  --primary-100: #ffe0bf;
  --primary-200: #ffc488;
  --primary-300: #ffa352;
  --primary-400: #f98627;
  --primary-500: #e76100;
  --primary-600: #c24f00;
  --primary-700: #973e00;
  --primary-800: #6b2c00;
  --primary-900: #4a1e00;

  --neutral-0: #ffffff;
  --neutral-50: #f5f6f8;
  --neutral-100: #e8eaee;
  --neutral-200: #cbd0d9;
  --neutral-300: #9ca3b0;
  --neutral-400: #6b7280;
  --neutral-500: #454b57;
  --neutral-600: #2e323d;
  --neutral-700: #1b1e27;
  --neutral-800: #10121a;
  --neutral-900: #070c1c;

  --success-bg: #e4f7ee;
  --success-border: #8fddb8;
  --success-solid: #1fa972;
  --success-text: #0f6b47;

  --danger-bg: #fceaea;
  --danger-border: #f0a6a8;
  --danger-solid: #e5484d;
  --danger-text: #992024;

  --warning-bg: #fef3e0;
  --warning-border: #f7ce83;
  --warning-solid: #f5a524;
  --warning-text: #8a5a0a;

  --info-bg: #e9f2fa;
  --info-border: #9cc5e6;
  --info-solid: #3b82c4;
  --info-text: #1f5178;

  --brand-500: var(--primary-500);
  --success-700: var(--success-text);
  --danger-700: var(--danger-text);
  --warning-700: var(--warning-text);
  --info-700: var(--info-text);

  --radius-sm: 0.45rem;
  --radius-md: 0.55rem;
  --radius-lg: 0.75rem;
  --radius-xl: 0.85rem;

  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;

  --table-cell-pad: 0.75rem 0.9rem;
  --table-cell-pad-compact: 0.55rem 0.5rem;

  --control-radius: 0.5rem;
  --control-border: 1px solid var(--neutral-200);
  --focus-ring: 2px solid var(--primary-400);
  --focus-offset: 2px;
  /* Always a dark dimmer — do not derive from --neutral-900 (inverted in dark theme) */
  --overlay-scrim: color-mix(in srgb, #070c1c 45%, transparent);
  --elevation-shadow: 0 16px 40px rgba(7, 12, 28, 0.18);
  --elevation-shadow-sm: 0 8px 22px rgba(7, 12, 28, 0.12);

  /* Scrollbars — brand-tinted overlay pill */
  --scrollbar-size: 10px;
  --scrollbar-track: transparent;
  --scrollbar-thumb-idle: color-mix(in srgb, var(--primary-500) 18%, transparent);
  --scrollbar-thumb: color-mix(in srgb, var(--primary-500) 36%, transparent);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--primary-500) 58%, transparent);
  --scrollbar-corner: transparent;

  --font-display: "Adawat Arabic", "IBM Plex Sans", "Segoe UI", sans-serif;
  --font-body: "Adawat Arabic", "IBM Plex Sans", "Segoe UI", sans-serif;
  --font-arabic: "Ubuntu Arabic", "Segoe UI", Tahoma, sans-serif;

  color-scheme: light;
}

:root.theme-dark {
  /* Primary tints tuned for dark surfaces — avoid light peach flash on hover */
  --primary-50: #2a1a0f;
  --primary-100: #3a2414;
  --primary-200: #5c3a1c;
  --primary-300: #a85a18;
  --primary-400: #e07020;
  --primary-500: #e76100;
  --primary-600: #f98627;
  --primary-700: #ffb366;
  --primary-800: #ffd2a3;
  --primary-900: #ffe8cc;

  --neutral-0: #10121a;
  --neutral-50: #151822;
  --neutral-100: #1f2430;
  --neutral-200: #2e3544;
  --neutral-300: #4b5568;
  --neutral-400: #7b8498;
  --neutral-500: #a3acbd;
  --neutral-600: #c5cbd6;
  --neutral-700: #dde2ea;
  --neutral-800: #eef1f6;
  --neutral-900: #f8f9fb;

  --success-bg: #123528;
  --success-border: #2f7a57;
  --success-text: #8fddb8;

  --danger-bg: #3a1719;
  --danger-border: #8f3a3d;
  --danger-text: #f0a6a8;

  --warning-bg: #3a2a10;
  --warning-border: #8a5a0a;
  --warning-text: #f7ce83;

  --info-bg: #15283a;
  --info-border: #3b82c4;
  --info-text: #9cc5e6;

  --overlay-scrim: color-mix(in srgb, #000000 72%, transparent);
  --elevation-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  --elevation-shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.4);

  --scrollbar-thumb-idle: color-mix(in srgb, var(--primary-500) 28%, transparent);
  --scrollbar-thumb: color-mix(in srgb, var(--primary-500) 48%, transparent);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--primary-400) 72%, transparent);

  color-scheme: dark;
}