/* Portaki — Mesh background utility.
   Glassmorphism only reads when there's color behind it — this utility supplies the soft,
   blurred blob backdrop every glass surface (Card variant="glass", Dialog, Sheet) expects to
   sit on top of. Keep blob opacity low (<20%) per DESIGN.md: if you can see a blob's edge, it's
   too strong. */

.ds-mesh-bg {
  position: relative;
  background-color: var(--color-bg-page);
  background-image:
    radial-gradient(ellipse 640px 480px at 8% 10%, var(--mesh-blob-amber), transparent 65%),
    radial-gradient(ellipse 560px 460px at 92% 85%, var(--mesh-blob-lime), transparent 62%),
    radial-gradient(ellipse 480px 380px at 50% 45%, var(--mesh-blob-azure), transparent 68%);
  background-attachment: fixed;
}

.ds-glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.ds-glass-strong {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
}