/* ============================================================
   SPACING · RADII · SHADOWS · LAYOUT — María Ynés Linares
   Generous white space. Rounded, soft, premium. No busy patterns.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base grid) ---- */
  --space-0:   0;
  --space-1:   0.25rem;   /* 4 */
  --space-2:   0.5rem;    /* 8 */
  --space-3:   0.75rem;   /* 12 */
  --space-4:   1rem;      /* 16 */
  --space-5:   1.5rem;    /* 24 */
  --space-6:   2rem;      /* 32 */
  --space-7:   2.5rem;    /* 40 */
  --space-8:   3rem;      /* 48 */
  --space-9:   4rem;      /* 64 */
  --space-10:  5rem;      /* 80 */
  --space-12:  6rem;      /* 96 */

  /* ---- Radii — soft & rounded everywhere ---- */
  --radius-xs:    6px;
  --radius-sm:    10px;
  --radius-md:    16px;
  --radius-lg:    24px;
  --radius-xl:    32px;
  --radius-2xl:   44px;
  --radius-pill:  999px;
  --radius-circle:50%;

  /* ---- Shadows — warm violet-tinted, soft, diffuse (never harsh black) ---- */
  --shadow-xs:   0 1px 2px rgba(118, 75, 144, 0.06);
  --shadow-sm:   0 2px 8px rgba(118, 75, 144, 0.08);
  --shadow-md:   0 8px 24px rgba(118, 75, 144, 0.10);
  --shadow-lg:   0 18px 48px rgba(118, 75, 144, 0.14);
  --shadow-xl:   0 30px 70px rgba(118, 75, 144, 0.18);
  --shadow-teal: 0 12px 32px rgba(43, 159, 162, 0.16);
  --shadow-gold: 0 8px 24px rgba(199, 155, 81, 0.22);

  /* ---- Focus ring ---- */
  --ring-width: 3px;
  --ring-offset: 2px;

  /* ---- Layout ---- */
  --container-sm:   480px;
  --container-md:   720px;
  --container-lg:   1080px;
  --container-xl:   1280px;
  --gutter:         var(--space-5);
  --header-height:  116px;

  /* ---- Motion — gentle, warm, never bouncy/harsh ---- */
  --ease-soft:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */  /* default ease-out */
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:    140ms; /* @kind other */
  --dur-base:    240ms; /* @kind other */
  --dur-slow:    420ms; /* @kind other */
}