:root{
  /* radii — the two surfaces differ on purpose */
  --r-sm:6px;
  --r-md:8px;
  --r-lg:10px;
  --r-card:12px;
  --r-panel:20px;
  --r-warm:18px;
  --r-pill:999px;

  /* borders */
  --bw-hairline:1px;
  --bw-control:1.5px;
  --bw-emphasis:2px;
  --bw-accent:5px;

  /* shadows */
  --sh-flat:0 1px 2px rgba(20,30,45,.04);
  --sh-tint:0 2px 10px rgba(27,58,92,.05);
  --sh-card:0 10px 30px rgba(47,53,55,.10);
  --sh-lift:0 14px 30px rgba(30,40,54,.12);
  --sh-pop:0 14px 34px rgba(47,53,55,.20);
  --sh-btn-pine:0 4px 14px rgba(47,74,60,.30);
  --sh-btn-river:0 3px 10px rgba(61,155,209,.35);

  /* motion */
  --ease-out:cubic-bezier(.2,.75,.25,1); /* @kind other */
  --dur-fast:.15s; /* @kind other */
  --dur-mid:.22s; /* @kind other */
  --dur-slow:.42s; /* @kind other */
  --t-hover:transform var(--dur-mid) ease, box-shadow var(--dur-mid) ease, border-color var(--dur-mid) ease;
}