:root{
  /* ---- Corner radii — soft, modern; app icon uses the largest ---- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---- Shadows — light, diffuse on white; no harsh drop shadows ---- */
  --shadow-sm: 0 1px 2px rgba(23,18,31,0.06), 0 1px 3px rgba(23,18,31,0.05);
  --shadow-md: 0 6px 16px rgba(23,18,31,0.08), 0 2px 6px rgba(23,18,31,0.05);
  --shadow-lg: 0 18px 40px rgba(23,18,31,0.12), 0 6px 14px rgba(23,18,31,0.06);
  /* Coloured glow — for gradient/primary CTAs and hero accents only */
  --shadow-violet: 0 10px 30px rgba(124,58,237,0.28);
  --shadow-violet-strong: 0 14px 40px rgba(124,58,237,0.42);

  /* ---- Motion — quick, confident, slight ease-out; 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: 120ms; /* @kind other */
  --dur: 200ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */

  /* ---- Focus ---- */
  --focus-width: 3px; /* @kind other */
}