:root {
  color-scheme: light;
  --nav-h: 58px;
  --nav-icon: 22px;
  --nav-label: 10px;
  --composer-h: 52px;
  --composer-pill-radius: 24px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --accent-soft: rgba(30, 79, 214, 0.1);
  --accent-soft-strong: rgba(30, 79, 214, 0.16);
  --nav-blur: blur(16px) saturate(1.15);
  --motion-fast: 0.14s ease;
  --motion-base: 0.22s ease;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0.01ms;
    --motion-base: 0.01ms;
  }
}

/* Icon glyphs. WebKit: inline SVG sits on the text baseline; <button>
   appearance:button keeps UA padding (1px 6px) and can ignore flex/grid,
   so glyphs look crooked / shifted. Do not set display:block on .vy-avatar. */
svg.vy-ico {
  display: block;
  flex-shrink: 0;
  overflow: visible;
}