/* ============================================================
   IUDEX — Spacing, radius, shadow, layout tokens
   ------------------------------------------------------------
   The system is editorial and airy: large outer margins, generous
   vertical rhythm, hairline structure. Corners are either crisp
   (cards, inputs) or full pills (buttons, chips, badges) — almost
   nothing in between. Shadows are soft and low-contrast; the brand
   never uses heavy or colored shadows.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --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:  7rem;      /* 112 */
  --space-14:  9rem;      /* 144 — section padding                              */
  --space-16:  12rem;     /* 192                                                */

  /* ---- Radius ---- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;    /* inputs, chat composer                              */
  --radius-lg:   18px;    /* cards, app panels                                  */
  --radius-xl:   28px;    /* large media frames                                 */
  --radius-pill: 999px;   /* buttons, chips, badges                             */

  /* ---- Hairline / border widths ---- */
  --border-width:      1px;  /* @kind spacing */
  --border-width-thick:1.5px;  /* @kind spacing */

  /* ---- Shadows (soft, achromatic) ---- */
  --shadow-xs:  0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-sm:  0 1px 3px rgba(10, 10, 10, 0.06), 0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-md:  0 6px 16px rgba(10, 10, 10, 0.07), 0 2px 6px rgba(10, 10, 10, 0.05);
  --shadow-lg:  0 18px 44px rgba(10, 10, 10, 0.10), 0 6px 14px rgba(10, 10, 10, 0.06);
  --shadow-pill:0 8px 22px rgba(10, 10, 10, 0.16);   /* lifted dark pill button */
  --shadow-float:0 28px 70px rgba(10, 10, 10, 0.14); /* device mockups / modals */

  /* ---- Layout ---- */
  --container-max:   1320px;  /* @kind spacing */
  --container-wide:  1560px;  /* @kind spacing */
  --gutter:          clamp(1.5rem, 5vw, 6rem);  /* @kind spacing */
  --section-y:       clamp(5rem, 10vw, 9rem);  /* @kind spacing */

  /* ---- 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 */
  --dur-fast:    140ms;  /* @kind other */
  --dur-base:    240ms;  /* @kind other */
  --dur-slow:    480ms;  /* @kind other */
}