/* ============================================================
   SCPS — Radius, elevation & motion tokens
   Corners are gently rounded (the brand reads corporate-calm,
   not playful). Shadows are navy-tinted, never neutral-gray.
   ============================================================ */

:root {
  /* ---- Border radius ---- */
  --radius-none: 0;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;    /* buttons, inputs */
  --radius-lg: 12px;   /* cards */
  --radius-xl: 16px;
  --radius-2xl: 24px;  /* feature panels, modals */
  --radius-3xl: 32px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---- Elevation (navy-tinted, low-spread, soft) ---- */
  --shadow-xs:  0 1px 2px rgba(10, 27, 50, 0.06);
  --shadow-sm:  0 1px 3px rgba(10, 27, 50, 0.08), 0 1px 2px rgba(10, 27, 50, 0.06);
  --shadow-md:  0 4px 12px rgba(10, 27, 50, 0.08), 0 2px 4px rgba(10, 27, 50, 0.05);
  --shadow-lg:  0 12px 28px rgba(10, 27, 50, 0.12), 0 4px 8px rgba(10, 27, 50, 0.06);
  --shadow-xl:  0 24px 48px rgba(10, 27, 50, 0.16), 0 8px 16px rgba(10, 27, 50, 0.08);
  --shadow-brand: 0 8px 24px rgba(42, 157, 143, 0.28);
  --shadow-inset: inset 0 1px 2px rgba(10, 27, 50, 0.08);

  /* ---- Focus ring ---- */
  --focus-ring: 0 0 0 3px var(--ring-focus);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in: cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* @kind other */

  --duration-fast: 120ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
  --duration-slow: 320ms; /* @kind other */
  --duration-slower: 480ms; /* @kind other */
}