/* ============================================================
   CASUALIZZE — Space, radius, shadow, motion, layout
   Minimalism = "menos, porém melhor" (Rams/Vignelli). Lots of
   respiro (breathing room), disciplined grid, sharp corners,
   hairline borders over heavy shadows.
   ============================================================ */

:root {
  /* --- Spacing scale (4px base) --- */
  --space-0:   0;
  --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;

  /* --- Radii ---
     The brand is mostly sharp & square (Zara/Oysho minimalism).
     Soft rounding reserved for the campaign "protection frame"
     and pill controls (filters / chips). */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;   /* campaign protection frame */
  --radius-pill: 999px;

  /* --- Shadows ---
     Used sparingly. Elevation usually comes from a hairline border
     and paper contrast, not a drop shadow. */
  --shadow-none:  none;
  --shadow-xs:    0 1px 2px rgba(18,18,18,0.05);
  --shadow-sm:    0 2px 8px rgba(18,18,18,0.06);
  --shadow-md:    0 8px 24px rgba(18,18,18,0.08);
  --shadow-lg:    0 18px 48px rgba(18,18,18,0.12);
  --shadow-focus: 0 0 0 2px var(--c-paper), 0 0 0 4px var(--c-ink);

  /* --- Motion ---
     Calm and confident — leveza, not bounce. Quick fades and small
     translations; no springy overshoot. */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0.05, 0.36, 1);   /* @kind other */
  --dur-fast:   140ms;  /* @kind other */
  --dur-base:   220ms;  /* @kind other */
  --dur-slow:   420ms;  /* @kind other */
  --dur-image:  720ms;  /* @kind other */ /* photographic zoom / reveal */

  /* --- Layout --- */
  --container:      1280px;
  --container-wide: 1480px;
  --container-text: 680px;   /* manifesto / prose measure */
  --gutter:         24px;
  --gutter-lg:      40px;
  --header-h:       72px;
}