/* Clocktower Connections — Radii, borders, shadows, motion */
:root {
  /* Corner radii — gently rounded, civic & approachable (not pill-everything) */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);

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

  /* Shadows — soft, warm, low-spread (paper-on-paper, never harsh) */
  --shadow-xs: 0 1px 2px rgba(20, 33, 58, 0.06);
  --shadow-sm: 0 1px 3px rgba(20, 33, 58, 0.08), 0 1px 2px rgba(20, 33, 58, 0.05);
  --shadow-md: 0 4px 12px rgba(20, 33, 58, 0.09), 0 2px 4px rgba(20, 33, 58, 0.05);
  --shadow-lg: 0 12px 28px rgba(20, 33, 58, 0.12), 0 4px 8px rgba(20, 33, 58, 0.06);
  --shadow-xl: 0 24px 48px rgba(14, 30, 61, 0.18);
  /* Gold focus glow & navy emphasis */
  --shadow-gold: 0 4px 14px rgba(232, 163, 23, 0.30);
  --ring-focus: 0 0 0 3px rgba(63, 124, 196, 0.45);

  /* Motion — calm, confident easing; no bounce */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur: 200ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */
}