/* Import theme.css first. Shared web treatment; Material components use the same tokens. */
.mhw-surface {
  color: var(--mhw-ink);
  font-family: var(--mhw-font-family);
  background:
    radial-gradient(at 0% 24%, color-mix(in srgb, var(--mhw-green) calc(var(--mhw-glass-green-glow-opacity) * 100%), transparent), transparent 65%),
    radial-gradient(at 100% 55%, color-mix(in srgb, var(--mhw-yellow) calc(var(--mhw-glass-sun-glow-opacity) * 100%), transparent), transparent 65%),
    linear-gradient(var(--mhw-sage), var(--mhw-surface), var(--mhw-sand));
}
.mhw-glass-card {
  color: var(--mhw-ink);
  padding: var(--mhw-card-padding);
  border: var(--mhw-glass-border-width) solid color-mix(in srgb, var(--mhw-white) 85%, var(--mhw-outline-variant));
  border-radius: var(--mhw-radius-large);
  background: color-mix(in srgb, var(--mhw-white) 94%, var(--mhw-sage));
  box-shadow: 0 var(--mhw-glass-shadow-elevation) 24px color-mix(in srgb, var(--mhw-forest) calc(var(--mhw-glass-shadow-opacity) * 100%), transparent);
}
@supports (backdrop-filter: blur(1px)) {
  .mhw-glass-card {
    background: color-mix(in srgb, var(--mhw-white) calc(var(--mhw-glass-card-opacity) * 100%), transparent);
    backdrop-filter: blur(var(--mhw-glass-web-blur));
  }
}