/* ============================================================
   Maitha Tech — Radii, shadows, borders & motion tokens
   The brand reads as flat & architectural: full-pill buttons,
   crisp hairlines, almost no drop shadow. Motion is calm —
   long eases, gentle blur-in reveals, no bounce.
   ============================================================ */

:root {
  /* —— Radii ——————————————————————————————————————— */
  --radius-none:   0;
  --radius-sm:     6px;
  --radius-md:     12px;
  --radius-lg:     20px;
  --radius-xl:     28px;
  --radius-pill:   100px;   /* buttons, chips, tags */
  --radius-round:  50%;     /* dots, avatars        */

  /* —— Border widths ————————————————————————————— */
  --border-hairline: 1px;   /* @kind other */
  --border-thick:    1.5px; /* @kind other */

  /* —— Shadows (used sparingly; mostly for light surfaces) — */
  --shadow-none:   none;
  --shadow-card:   0 2px 40px rgba(0, 0, 0, 0.10);
  --shadow-pop:    0 18px 50px rgba(0, 0, 0, 0.45);
  --shadow-glow:   0 0 0 4px var(--focus-ring);

  /* —— Motion ————————————————————————————————————— */
  --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:      0.18s;  /* @kind other */
  --dur-base:      0.32s;  /* @kind other */
  --dur-slow:      0.6s;   /* @kind other */
  --dur-reveal:    0.9s;   /* @kind other */
}