/* ============================================================
   STUDIO MAHFA — SPACING, RADIUS, SHADOW, MOTION TOKENS
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---- Radius ----
     The brand is hand-inked and architectural (adobe arches,
     printed posters) — corners are either sharp (cards, buttons,
     panels) or fully round (pills, dots, seals). No in-between
     4–8px "soft" rounding. */
  --radius-sharp: 2px;
  --radius-panel: 6px;
  --radius-pill: 999px;

  /* ---- Border widths ---- */
  --border-thin: 1px;
  --border-thick: 2px;
  --border-heavy: 3px;

  /* ---- Shadow ----
     Flat, printed, poster-like — shadows are rare and used only
     as a hard offset "sticker" shadow, never soft/blurred glows. */
  --shadow-sticker-sm: 3px 3px 0 0 var(--black-100);
  --shadow-sticker-md: 6px 6px 0 0 var(--black-100);
  --shadow-lift: 0 8px 24px rgba(20, 16, 13, 0.18);

  /* ---- Motion ----
     Logo-phase-in-and-out mark motion: soft crossfades and slow
     dissolves, no bounce/spring — this is a poster brand, not a
     playful app. */
  --ease-brand: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --duration-fast: 150ms; /* @kind other */
  --duration-base: 300ms; /* @kind other */
  --duration-slow: 600ms; /* @kind other */
  --duration-phase: 1400ms; /* @kind other */
}