:root{
  /* ---- Spacing — 4px base ---- */
  --space-0:0px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --space-32:128px;

  --gutter:var(--space-6);
  --section-y:var(--space-32);   /* scenes need air, not sections */
  --scene-min:88vh;              /* a scene fills the room */
  --container-max:1180px;
  --container-narrow:720px;
  --measure:66ch;

  /* ---- Radii — modest and traditional ---- */
  --radius-none:0px;
  --radius-xs:3px;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;
  --radius-xl:20px;
  --radius-pill:999px;
  --radius-card:var(--radius-lg);
  --radius-control:var(--radius-sm);
  /* Tall arch — the mihrab/rawaq silhouette, for portraits and feature imagery */
  --radius-arch:999px 999px var(--radius-md) var(--radius-md);

  /* ---- Elevation ----
     Shadows are the colour of the ground the light falls on: warm brown, never
     blue-grey. On light surfaces prefer the --bloom-* tokens in colors.css. */
  --shadow-none:none;
  --shadow-hairline:0 0 0 1px var(--border-hairline);
  --shadow-sm:0 1px 2px rgba(70,57,40,.08),0 1px 1px rgba(70,57,40,.05);
  --shadow-md:0 4px 14px rgba(70,57,40,.11),0 1px 3px rgba(70,57,40,.07);
  --shadow-lg:0 14px 40px rgba(42,33,20,.16),0 3px 10px rgba(42,33,20,.08);
  --shadow-gold:0 6px 20px rgba(184,147,88,.3);
  --shadow-lamp:0 0 44px rgba(255,183,84,.22);
  --shadow-inset-line:inset 0 -1px 0 var(--border-hairline);
  --focus-ring:0 0 0 3px rgba(36,50,121,.28);
  --focus-ring-gold:0 0 0 3px rgba(184,147,88,.35);

  /* ---- Motion — one curve, four durations ---- */
  --ease-out:cubic-bezier(.22,.61,.36,1); /* @kind other */
  --ease-in-out:cubic-bezier(.45,0,.25,1); /* @kind other */
  --duration-instant:90ms; /* @kind other */
  --duration-fast:160ms; /* @kind other */
  --duration-base:220ms; /* @kind other */
  --duration-slow:420ms; /* @kind other */
  --duration-veil:900ms; /* @kind other */
  --duration-curtain:1400ms; /* @kind other */   /* the pardeh opening — deliberately slow */
  --duration-dwell:2600ms; /* @kind other */     /* how long a scene holds before the next */
  --ease-curtain:cubic-bezier(.16,.84,.24,1); /* @kind other */  /* fast out, long settle */
  --transition-control:background-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out); /* @kind other */

  /* ---- Panel geometry (poster mosaic) ---- */
  --panel-slant:2.5%;
  --panel-radius:2px;
  --panel-edge:1px;
  --poster-gutter:6px;
  --bubble-outline:1.5px;
  --bubble-radius:18px;
  --poster-skew:-1.1deg; /* @kind other */
}
@media (prefers-reduced-motion:reduce){
  :root{--duration-fast:0ms; /* @kind other */ --duration-base:0ms; /* @kind other */ --duration-slow:0ms; /* @kind other */ --duration-veil:0ms; /* @kind other */ --duration-curtain:0ms; /* @kind other */ --duration-dwell:0ms; /* @kind other */}
}