/* ==========================================================================
   DESIGN TOKENS — raw, theme-independent scales.
   Colors live ONLY in themes.css. Never hardcode a color/spacing elsewhere.
   Breakpoints (CSS vars can't be used in @media, keep these literals in sync):
     sm 640px · md 768px · lg 1024px · xl 1280px · 2xl 1536px
   ========================================================================== */
:root {
  /* Typography — NEVER use letter-spacing on Persian text (breaks joining) */
  --font-sans: "YaranSans", "Vazirmatn", Tahoma, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: .75rem;   --fs-sm: .8125rem; --fs-base: .9375rem; --fs-md: 1rem;
  --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem;   --fs-3xl: 2.25rem;
  --fs-display: clamp(2.5rem, 6vw, 4.5rem);
  --lh-tight: 1.3; --lh-snug: 1.5; --lh-base: 1.8;
  --fw-regular: 400; --fw-medium: 500; --fw-bold: 700;

  /* Spacing (4px scale) */
  --sp-0: 0;       --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem; --sp-12: 3rem;
  --sp-16: 4rem;   --sp-20: 5rem;

  /* Radius — deliberately restrained (no pill-everything look) */
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  /* Z-index scale */
  --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-sidebar: 200;
  --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;

  /* Motion */
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  /* Layout */
  --sidebar-w: 17rem; --sidebar-w-collapsed: 4.75rem; --topbar-h: 4.25rem;
  --content-max: 82rem; --control-h: 2.5rem; --control-h-sm: 2rem; --control-h-lg: 3rem;

  /* Direction helper (used for off-canvas transforms) */
  --flip: 1;
}
html[dir="ltr"] { --flip: -1; }