/* Laqta · لقطة — design tokens
   Brand direction 02 "Flash" (see branding/BRANDING_STATUS.md).
   Coral and sun stay as accents; ink and cream carry the page so the booth
   renders — which are dark and warm — are the loudest thing on screen. */
:root{
  /* ---- palette ---- */
  --coral:#FF4D52;
  --coral-deep:#E03B40;
  --coral-soft:rgba(255,77,82,.10);
  --sun:#FFD23F;
  --sun-deep:#C79A12;
  --cream:#FFF4E8;
  --tint:#FFE7DA;           /* warm blush band, alternates with cream */
  --paper:#FFFFFF;
  --ink:#16130F;
  --ink-2:#241F19;          /* raised surface on ink */
  --ink-3:#0D0B09;          /* deepest */

  --on-cream:rgba(22,19,15,.86);
  --on-cream-mute:rgba(22,19,15,.60);
  --on-cream-faint:rgba(22,19,15,.42);
  --on-ink:rgba(255,244,232,.84);
  --on-ink-mute:rgba(255,244,232,.58);
  --on-ink-faint:rgba(255,244,232,.34);

  --hairline:rgba(22,19,15,.12);
  --hairline-soft:rgba(22,19,15,.07);
  --hairline-on-ink:rgba(255,244,232,.16);

  /* ---- type ---- */
  --font:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ar:'Tajawal', system-ui, sans-serif;
  /* utility face: labels, buttons, specs, numerals — the machine voice */
  --font-mono:'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- rhythm ---- */
  --maxw:1200px;
  --maxw-narrow:70ch;
  --gutter:clamp(20px, 5vw, 56px);
  --section-y:clamp(64px, 9vw, 116px);

  /* Everything is a print: square corners, a hard rule, a hard drop. */
  --radius-sm:0;
  --radius:0;
  --radius-lg:0;
  --radius-pill:0;

  --edge-w:3px;
  --edge:var(--edge-w) solid var(--ink);
  --edge-on-ink:var(--edge-w) solid var(--cream);
  --pop-sm:4px 4px 0 var(--ink);
  --pop:7px 7px 0 var(--ink);
  --pop-lg:12px 12px 0 var(--ink);
  --pop-cream:7px 7px 0 var(--cream);

  --shadow-sm:var(--pop-sm);
  --shadow:var(--pop);
  --shadow-lg:var(--pop-lg);

  /* ---- motion ---- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:380ms;
}

@media (prefers-reduced-motion: reduce){
  :root{--dur:1ms}
  html{scroll-behavior:auto}
}