/* ============================================================
   SPACING & LAYOUT — Saudi Film Commission
   8px base grid with editorial extensions for generous white space.
   Swiss-grid container + column tokens for dashboard layouts.
   ============================================================ */

:root {
  /* ---- Spacing scale (8px base) -------------------------- */
  --space-0:   0;
  --space-1:   0.25rem; /* 4  */
  --space-2:   0.5rem;  /* 8  */
  --space-3:   0.75rem; /* 12 */
  --space-4:   1rem;    /* 16 */
  --space-5:   1.5rem;  /* 24 */
  --space-6:   2rem;    /* 32 */
  --space-7:   2.5rem;  /* 40 */
  --space-8:   3rem;    /* 48 */
  --space-9:   4rem;    /* 64 */
  --space-10:  5rem;    /* 80 */
  --space-11:  6.5rem;  /* 104 */
  --space-12:  8rem;    /* 128 */

  /* ---- Radii (restrained, editorial) --------------------- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   18px;
  --radius-pill: 999px;

  /* ---- Layout grid --------------------------------------- */
  --container-max: 1320px;
  --container-wide: 1560px;
  --grid-columns: 12; /* @kind other */
  --grid-gutter: 24px;
  --page-margin: clamp(1.25rem, 4vw, 4.5rem);

  /* ---- Borders ------------------------------------------- */
  --border-width: 1px;
  --border-hairline: 1px solid var(--line-hairline);
  --border-soft: 1px solid var(--line-soft);
}