/* ============================================================
   Tel qu'elle — Radii, shadows, borders, motion
   Soft rounded forms; the logo's circular "e" inspires the
   generous pill/circle radii. Shadows are warm-tinted and
   diffuse — never harsh grey drop-shadows.
   ============================================================ */

:root {
  /* ---- Radii ---- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-xl:   32px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---- Shadows (warm indigo-tinted, diffuse) ---- */
  --shadow-xs: 0 1px 2px rgba(33, 32, 79, 0.06);
  --shadow-sm: 0 2px 8px rgba(33, 32, 79, 0.07);
  --shadow-md: 0 10px 30px -12px rgba(33, 32, 79, 0.18);
  --shadow-lg: 0 26px 60px -22px rgba(33, 32, 79, 0.26);
  --shadow-apricot: 0 14px 34px -14px rgba(208, 140, 87, 0.45);

  /* ---- Borders ---- */
  --border-hairline: 1px solid var(--border-subtle);
  --border-width: 1px;

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);       /* @kind other */
  --dur-fast:   140ms;   /* @kind other */
  --dur-base:   240ms;   /* @kind other */
  --dur-slow:   420ms;   /* @kind other */

  /* ---- Focus ring ---- */
  --focus-ring: 0 0 0 3px rgba(46, 45, 122, 0.28);
}