/* ============================================================
   KDN · RADIUS & EFFECTS TOKENS
   Rounded shapes echo the logo's curved "D". Soft, friendly, bold.
   ============================================================ */

:root {
  /* ---- Border radius ---- */
  --radius-xs:   0.375rem;  /* 6  · badges, tags        */
  --radius-sm:   0.625rem;  /* 10 · inputs, chips       */
  --radius-md:   1rem;      /* 16 · buttons             */
  --radius-lg:   1.5rem;    /* 24 · cards               */
  --radius-xl:   2rem;      /* 32 · large cards/posters */
  --radius-2xl:  2.75rem;   /* 44 · hero panels         */
  --radius-pill: 999px;     /* pills, price badges      */
  --radius-circle: 50%;

  /* ---- Borders ---- */
  --border-hair:  1px;
  --border-thin:  1.5px;
  --border-bold:  2px;
  --border-frame: 3px;      /* logo-inspired frame      */

  /* ---- Shadows (soft, warm-neutral; never harsh) ---- */
  --shadow-xs:  0 1px 2px rgba(20,21,20,0.08);
  --shadow-sm:  0 2px 8px rgba(20,21,20,0.10);
  --shadow-md:  0 8px 24px rgba(20,21,20,0.12);
  --shadow-lg:  0 18px 48px rgba(20,21,20,0.18);
  /* Orange glow for emphasis on dark surfaces */
  --shadow-accent: 0 10px 30px rgba(255,81,0,0.30);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-snap:   cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */ /* slight bounce */
  --dur-fast:    120ms; /* @kind other */
  --dur-base:    200ms; /* @kind other */
  --dur-slow:    320ms; /* @kind other */
}