/* ============================================================
   Niu Creative — Spacing, radii, depth, layout
   4px base grid. Whitespace comes from tall section BANDS, not from
   loose internal padding. Depth is FLAT — color blocks + band
   inversion, not shadow.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0: 0;
  --space-1: 4px;    /* xxs */
  --space-2: 8px;    /* xs  */
  --space-3: 12px;   /* sm  */
  --space-4: 16px;   /* md  */
  --space-5: 24px;   /* lg  */
  --space-6: 32px;   /* xl  */
  --space-7: 48px;   /* xxl */
  --space-8: 64px;
  --space-9: 80px;   /* xxxl */
  --space-10: 128px; /* section rhythm */
  --space-11: 160px;
  --space-12: 200px;
  --section-y: var(--space-10);

  /* ---- Radii — BINARY system: everything square, buttons + chips pill ---- */
  --radius-none: 0;       /* photo tiles, cards, inputs, grids — the default */
  --radius-xs: 2px;       /* reserved */
  --radius-sm: 4px;       /* reserved */
  --radius-md: 8px;       /* reserved */
  --radius-pill: 999px;   /* buttons, icon buttons, chips, badges, tags */
  --radius-panel: 28px;   /* large rounded content panels (Shopify-structure) */
  --radius-card: var(--radius-none);

  /* ---- Border widths ---- */
  --border-width: 1px;
  --border-width-thick: 1.5px;

  /* ---- Depth — FLAT. Shadows exist only for true overlays (menus,
         dialogs, toasts) that float above the page. Page content is
         flat: color blocks + 1px hairlines + the band inversion. ---- */
  --shadow-none: none;
  --shadow-overlay: 0 12px 40px rgba(0, 0, 0, 0.36);   /* popovers/menus */
  --shadow-dialog:  0 32px 80px rgba(0, 0, 0, 0.48);   /* modals only    */

  /* ---- Layout ---- */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1280px;
  --gutter: var(--space-6);

  /* ---- Motion — calm, confident, no bounce ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --duration-fast: 130ms; /* @kind other */
  --duration-base: 220ms; /* @kind other */
  --duration-slow: 420ms; /* @kind other */
}