/* Three levels. Most surfaces are a 1px line with no shadow at all. */
:root{
  --shadow-none:none;
  --shadow-hairline:0 1px 2px rgba(26,32,40,.04);
  --shadow-card:0 1px 2px rgba(26,32,40,.05), 0 8px 24px -12px rgba(26,32,40,.12);
  --shadow-card-soft:0 1px 2px rgba(26,32,40,.05), 0 8px 24px -12px rgba(26,32,40,.10);
  --shadow-overlay:0 24px 48px -16px rgba(26,32,40,.22);
  --shadow-bento:0 2px 4px rgba(26,32,40,.04), 0 20px 44px -24px rgba(26,32,40,.20);

  /* the one coloured shadow: under a green CTA */
  --shadow-green:0 6px 16px -8px rgba(34,197,95,.7);

  /* focus */
  --ring-brand:0 0 0 3px rgba(34,197,95,.28);
  --ring-ink:0 0 0 3px rgba(26,32,40,.14);
}