/* ============================================================
   Konpo, Spacing, radius, shadow, layout tokens
   Generous whitespace is the brand. Radii are large and soft.
   ============================================================ */

: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-32: 128px;
  --space-40: 160px;

  /* Section rhythm, the air between big blocks */
  --section-gap:     clamp(80px, 12vw, 200px);
  --block-gap:       clamp(40px, 6vw, 96px);
  --page-margin:     clamp(20px, 4vw, 56px);
  --content-max:     1440px;

  /* ---- Radius ----
     Konpo uses large, friendly corners on cards; full pills on
     buttons and partner chips. */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  16px;
  --radius-lg:  24px;   /* standard card */
  --radius-xl:  32px;   /* large showcase cards */
  --radius-2xl: 44px;
  --radius-pill: 999px;
  --radius-circle: 50%;

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

  /* ---- Shadows ----
     Restrained. Cards float on barely-there shadows; dark cards
     get a soft ambient bloom. No harsh drop shadows. */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(20,24,43,0.05);
  --shadow-sm: 0 2px 8px rgba(20,24,43,0.06);
  --shadow-md: 0 8px 28px rgba(20,24,43,0.08);
  --shadow-lg: 0 24px 60px rgba(20,24,43,0.12);
  --shadow-card: 0 1px 0 rgba(255,255,255,0.7) inset, 0 10px 40px rgba(20,24,43,0.07);
  --shadow-float: 0 30px 80px rgba(27,36,102,0.18);

  /* ---- Motion ----
     Quiet, confident easing. Long ease-outs, 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 */
  --dur-fast:   140ms;   /* @kind other */
  --dur-base:   240ms;   /* @kind other */
  --dur-slow:   480ms;   /* @kind other */
  --dur-reveal: 720ms;   /* @kind other */

  /* ---- Dot-matrix motif ---- */
  --dot-size: 8px;
  --dot-gap:  20px;
  --dot-idle: var(--iw-cloud);
  --dot-live: var(--iw-indigo-500);
}