/* ============================================================
   KSTK Predictive Mindset — Radius, shadow & motion tokens
   Shadow colour is the brand slate rgba(56,57,70,*) — a cool,
   navy-tinted shadow rather than pure black.
   ============================================================ */

:root {
  /* Corner radius */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;   /* buttons, inputs, chips */
  --radius-lg:   12px;  /* cards */
  --radius-xl:   16px;  /* large cards, modals */
  --radius-2xl:  24px;  /* hero / feature panels */
  --radius-pill: 999px;
  --radius-logo: 22%;   /* KSTK rounded-square mark */

  /* Elevation — cool slate-tinted shadows */
  --shadow-xs:  0 0.5px 2px rgba(56, 57, 70, 0.16);
  --shadow-sm:  0 1px 3px rgba(56, 57, 70, 0.12);
  --shadow-md:  0 4px 8px rgba(56, 57, 70, 0.16);
  --shadow-lg:  0 8px 24px rgba(56, 57, 70, 0.16);
  --shadow-xl:  0 20px 48px rgba(56, 57, 70, 0.20);
  --shadow-card: 0 4px 16px rgba(38, 39, 49, 0.06);

  /* Focus ring */
  --ring-brand: 0 0 0 3px rgba(15, 111, 255, 0.30);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);  /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);  /* @kind other */
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);  /* @kind other */
  --dur-fast:   120ms;  /* @kind other */
  --dur-base:   200ms;  /* @kind other */
  --dur-slow:   320ms;  /* @kind other */
}