/* ============================================================
   CCSentry — Radius, border, shadow & motion tokens
   Soft-but-precise: gentle radii (approachable) with
   crisp 1px borders and low, cool-tinted shadows (credible).
   ============================================================ */

:root {
  /* Corner radius */
  --radius-xs:   3px;
  --radius-sm:   5px;
  --radius-md:   8px;    /* default: inputs, buttons, badges */
  --radius-lg:   12px;   /* cards */
  --radius-xl:   16px;   /* large panels, modals */
  --radius-2xl:  24px;   /* hero / marketing cards */
  --radius-pill: 999px;  /* pills, avatars, status chips */

  /* Border widths */
  --border-thin:  1px;
  --border-md:    1.5px;
  --border-thick: 2px;

  /* Shadows — cool slate-tinted, low and soft. Compliance = restrained depth. */
  --shadow-xs: 0 1px 2px rgba(20, 30, 45, 0.06);
  --shadow-sm: 0 1px 2px rgba(20, 30, 45, 0.05), 0 2px 4px rgba(20, 30, 45, 0.05);
  --shadow-md: 0 2px 4px rgba(20, 30, 45, 0.05), 0 6px 12px rgba(20, 30, 45, 0.07);
  --shadow-lg: 0 4px 8px rgba(20, 30, 45, 0.06), 0 16px 28px rgba(20, 30, 45, 0.10);
  --shadow-xl: 0 8px 16px rgba(20, 30, 45, 0.08), 0 28px 48px rgba(20, 30, 45, 0.14);

  /* Focus ring */
  --ring-width: 3px;
  --ring-color: rgba(59, 91, 219, 0.30);  /* blue-600 @ 30% */
  --ring: 0 0 0 var(--ring-width) var(--ring-color);

  /* Motion — quick, eased, no bounce. Compliance feels calm + sure. */
  --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-out:   cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   120ms;  /* @kind other */
  --dur-base:   180ms;  /* @kind other */
  --dur-slow:   280ms;  /* @kind other */
}