/* Design tokens — the only place raw colour lives.
   Palette is the reference identity: radix gray/indigo scales, 12 steps, dark by default.
   Semantic names only below the scale; components never use --gray-N directly. */

:root {
  color-scheme: dark;

  --gray-1: #111111; --gray-2: #191919; --gray-3: #222222; --gray-4: #2a2a2a;
  --gray-5: #313131; --gray-6: #3a3a3a; --gray-7: #484848; --gray-8: #606060;
  --gray-9: #6e6e6e; --gray-10: #7b7b7b; --gray-11: #b4b4b4; --gray-12: #eeeeee;
  --accent-3: #1f2a63; --accent-9: #4d5bd6; --accent-11: #a5b0ff; --accent-12: #d3d8ff;
  --danger-9: #e5484d; --danger-11: #ff9592; --success-9: #30a46c; --warn-9: #ffb224;

  --bg: var(--gray-2);
  --bg-raised: var(--gray-3);
  --bg-sunken: var(--gray-1);
  --surface: color-mix(in oklab, var(--gray-3) 88%, transparent);
  --border: var(--gray-5);
  --border-strong: var(--gray-7);
  --text: var(--gray-12);
  --text-muted: var(--gray-11);
  --text-faint: var(--gray-9);
  --link: var(--accent-11);
  --focus-ring: var(--accent-11);

  --font-sans: "IBM Plex Sans Arabic", "Noto Sans Arabic", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --step--1: 0.8125rem;
  --step-0: 0.9375rem;
  --step-1: 1.0625rem;
  --step-2: 1.375rem;
  --step-3: 1.875rem;
  --step-4: 2.5rem;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-pill: 999px;

  --border-width: 1px;
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px -12px rgb(0 0 0 / 0.5);
  --dur: 160ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  --page-max: 1120px;
  --gutter: 24px;
  --col-gap: 24px;
  --rail-inline: 160px;
  --aside: 254px;
}

[data-scheme="light"] {
  color-scheme: light;
  --gray-1: #fcfcfc; --gray-2: #f9f9f9; --gray-3: #f0f0f0; --gray-4: #e8e8e8;
  --gray-5: #e0e0e0; --gray-6: #d9d9d9; --gray-7: #cecece; --gray-8: #bbbbbb;
  --gray-9: #8d8d8d; --gray-10: #838383; --gray-11: #646464; --gray-12: #202020;
  --accent-3: #e6e9ff; --accent-9: #4353c8; --accent-11: #3a49b8; --accent-12: #1c2570;
  --surface: color-mix(in oklab, #ffffff 92%, transparent);
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.06), 0 8px 24px -14px rgb(0 0 0 / 0.18);
}

/* Grid contract: one column stack, rail and aside only when there is room.
   Direction-agnostic — sides are logical, never left/right. */
@media (min-width: 960px) {
  :root { --gutter: 32px; }
}
@media (min-width: 1200px) {
  :root { --page-max: 1216px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; }
}