/* ============================================================
   JustFinTech — Spacing, radius, shadow, layout tokens
   4px base grid. Cards round at 20px, controls at 8px, pills full.
   Shadows are subtle and cool; most separation comes from
   hairline borders and surface contrast, not heavy elevation.
   ============================================================ */

: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-30:  120px;

  /* ---- Radius ----------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   8px;    /* buttons, chips, inputs       */
  --radius-md:   12px;
  --radius-lg:   20px;   /* cards (the brand default)    */
  --radius-xl:   28px;
  --radius-2xl:  40px;   /* large feature panels         */
  --radius-pill: 999px;

  /* ---- Border widths ---------------------------------------- */
  --bw-hairline: 1px;
  --bw-thick:    2px;

  /* ---- Shadows (cool, restrained) --------------------------- */
  --shadow-xs: 0 1px 2px rgba(4,4,41,0.05);
  --shadow-sm: 0 2px 8px rgba(4,4,41,0.06);
  --shadow-md: 0 8px 24px rgba(4,4,41,0.08);
  --shadow-lg: 0 18px 50px rgba(4,4,41,0.12);
  --shadow-cta: 0 10px 24px rgba(47,47,178,0.28);

  /* ---- Layout ----------------------------------------------- */
  --container-max: 1280px;   /* @kind spacing */
  --frame-width:   1440px;   /* @kind spacing */
  --gutter:        80px;     /* @kind spacing */
  --gutter-sm:     24px;     /* @kind spacing */
  --section-y:     120px;    /* @kind spacing */

  /* ---- Motion ----------------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */
}