/* ============================================================
   Five by Five - Radius, Borders, Elevation, Motion
   Crisp and confident: restrained radii, tight shadows,
   quick decisive easing (no bounce).
   ============================================================ */

:root {
  /* ---- Corner radius ------------------------------------- */
  --radius-none: 0;
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;   /* default control radius */
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ---- Border widths ------------------------------------- */
  --border-hairline: 1px;
  --border-thick: 2px;

  /* ---- Elevation (crisp, low-spread) --------------------- */
  --shadow-xs: 0 1px 2px rgba(13, 15, 15, 0.06);
  --shadow-sm: 0 1px 3px rgba(13, 15, 15, 0.08), 0 1px 2px rgba(13, 15, 15, 0.06);
  --shadow-md: 0 4px 12px rgba(13, 15, 15, 0.08), 0 2px 4px rgba(13, 15, 15, 0.05);
  --shadow-lg: 0 12px 28px rgba(13, 15, 15, 0.12), 0 4px 8px rgba(13, 15, 15, 0.06);
  --shadow-xl: 0 24px 56px rgba(13, 15, 15, 0.16), 0 8px 16px rgba(13, 15, 15, 0.08);

  /* Coloured glow - reserve for the green primary pop */
  --glow-accent: 0 6px 20px rgba(40, 220, 154, 0.35);

  /* ---- Motion -------------------------------------------- */
  --duration-instant: 80ms;  /* @kind other */
  --duration-fast:    140ms; /* @kind other */
  --duration-base:    220ms; /* @kind other */
  --duration-slow:    340ms; /* @kind other */

  /* Sharp, decisive out-curve - the house easing */
  --ease-out:      cubic-bezier(0.2, 0, 0, 1);    /* @kind other */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */

  --transition-base: all var(--duration-base) var(--ease-out);
  --transition-fast: all var(--duration-fast) var(--ease-out);
}