/* Ledger Rocket — radii, shadows, motion, focus. */
:root {
  /* Radii — geometric, restrained */
  --radius-xs: 4px;    /* checkboxes, tiny chips */
  --radius-sm: 8px;    /* controls: buttons, inputs, selects */
  --radius-md: 12px;   /* cards, table shells */
  --radius-lg: 16px;   /* modals, large panels */
  --radius-pill: 999px;/* badges, tags, switches */
  --radius-control: var(--radius-sm);
  --radius-card: var(--radius-md);

  /* Shadows — cool navy-tinted, very quiet. Depth comes from hairlines first. */
  --shadow-xs: 0 1px 2px rgba(20, 18, 48, 0.05);
  --shadow-sm: 0 1px 2px rgba(20, 18, 48, 0.05), 0 2px 8px rgba(20, 18, 48, 0.05);
  --shadow-md: 0 2px 4px rgba(20, 18, 48, 0.06), 0 8px 24px rgba(20, 18, 48, 0.10);
  --shadow-lg: 0 4px 8px rgba(20, 18, 48, 0.08), 0 20px 48px rgba(20, 18, 48, 0.16);
  --shadow-focus: 0 0 0 3px rgba(91, 85, 189, 0.28);

  /* Motion — quick, precise; no bounce */
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 180ms; /* @kind other */
  --dur-slow: 240ms; /* @kind other */
}