/* ===========================================================================
   SpitiDaneio — Spacing, radii, shadows, motion
   ---------------------------------------------------------------------------
   The brand is soft, rounded and friendly: generous corner radii, pill-shaped
   buttons & chips, and light diffuse shadows (never heavy/banky). Motion is
   calm — gentle ease-out fades and small lifts, no bounces.
   =========================================================================== */

:root {
  /* 4px base spacing scale */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;

  /* Radii — soft & rounded is core to the brand */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  36px;
  --radius-pill: 999px;   /* buttons, chips, badges */
  --radius-circle: 50%;

  /* Shadows — diffuse, cool-tinted, low contrast */
  --shadow-xs:  0 1px 2px rgba(13, 50, 104, 0.06);
  --shadow-sm:  0 2px 8px rgba(13, 50, 104, 0.07);
  --shadow-md:  0 8px 24px rgba(13, 50, 104, 0.09);
  --shadow-lg:  0 18px 48px rgba(13, 50, 104, 0.12);
  --shadow-xl:  0 30px 70px rgba(13, 50, 104, 0.16);
  --shadow-accent: 0 12px 30px rgba(118, 226, 255, 0.45);

  /* Borders */
  --border-width: 1px;
  --border-width-strong: 1.5px;

  /* Motion */
  --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: 200ms;                        /* @kind other */
  --duration-slow: 320ms;                        /* @kind other */

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 760px;
}