:root{
  /* Shadows are quiet: the system leans on 1px borders and flat fills.
     Depth is reserved for things that truly float (menus, modals, toasts). */
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(16,16,18,.06);
  --shadow-sm:0 1px 3px rgba(16,16,18,.08),0 1px 2px rgba(16,16,18,.04);
  --shadow-md:0 4px 12px rgba(16,16,18,.08),0 1px 3px rgba(16,16,18,.04);
  --shadow-lg:0 12px 32px rgba(16,16,18,.12),0 2px 6px rgba(16,16,18,.05);
  --shadow-xl:0 24px 60px rgba(16,16,18,.18);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.6);
  --shadow-brand:0 6px 18px rgba(255,222,0,.45);

  /* Focus: a black ring with a yellow halo — legible on both white and yellow */
  --focus-ring:0 0 0 2px var(--white),0 0 0 4px var(--ink-950);
  --focus-ring-brand:0 0 0 2px var(--ink-950),0 0 0 5px rgba(255,222,0,.9);
  --focus-ring-inverse:0 0 0 2px var(--ink-950),0 0 0 4px var(--atto-yellow);
}