/* SNS glass & scrim V1.0 · 2026-10-28 · Load after color/type/geometry/shadow CSS. */
:root {
  --glass-alpha: 82%;
  --glass-blur: 16px;
  --glass-saturation: 110%;
  --glass-edge: rgb(255 255 255 / 0.78);
  --glass-highlight: inset 0 1px 0 rgb(255 255 255 / 0.8);
  --glass-shadow: var(--shadow-level-2);
  --glass-fallback: var(--color-bg-surface);
  --glass-light-alpha: 72%;
  --glass-light-blur: 24px;
  --glass-light-saturation: 115%;
  --glass-standard-alpha: 82%;
  --glass-standard-blur: 16px;
  --glass-standard-saturation: 110%;
  --glass-readable-alpha: 92%;
  --glass-readable-blur: 12px;
  --glass-readable-saturation: 105%;
  --scrim-subtle-alpha: 28.000000000000004%;
  --scrim-medium-alpha: 40%;
  --scrim-modal-alpha: 56.00000000000001%;
  --scrim-loading-alpha: 72%;
  --scrim-dialog-blur: 4px;
}
.sns-glass[data-glass="light"] { --glass-alpha: var(--glass-light-alpha); --glass-blur: var(--glass-light-blur); --glass-saturation: var(--glass-light-saturation); --glass-shadow: var(--shadow-level-2); }
.sns-glass[data-glass="standard"] { --glass-alpha: var(--glass-standard-alpha); --glass-blur: var(--glass-standard-blur); --glass-saturation: var(--glass-standard-saturation); --glass-shadow: var(--shadow-level-2); }
.sns-glass[data-glass="readable"] { --glass-alpha: var(--glass-readable-alpha); --glass-blur: var(--glass-readable-blur); --glass-saturation: var(--glass-readable-saturation); --glass-shadow: var(--shadow-popover); }
.sns-glass {
  background: var(--glass-fallback);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sns-glass {
    background: color-mix(in srgb, var(--color-bg-surface) var(--glass-alpha), transparent);
    border-color: var(--glass-edge);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  }
}
.sns-scrim-subtle { background: color-mix(in srgb, var(--color-bg-overlay) var(--scrim-subtle-alpha), transparent); }
.sns-scrim-medium { background: color-mix(in srgb, var(--color-bg-overlay) var(--scrim-medium-alpha), transparent); }
.sns-scrim-modal { background: color-mix(in srgb, var(--color-bg-overlay) var(--scrim-modal-alpha), transparent); }
.sns-scrim-loading { background: color-mix(in srgb, var(--color-bg-surface) var(--scrim-loading-alpha), transparent); }
.sns-glass-solid { background: var(--glass-fallback) !important; border-color: var(--color-border-default) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
@media (prefers-reduced-transparency: reduce) { .sns-glass { background: var(--glass-fallback) !important; border-color: var(--color-border-default) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } }
@media (forced-colors: active) { .sns-glass { background: Canvas !important; color: CanvasText !important; border: 1px solid CanvasText !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } }
@media print { .sns-glass { background: var(--glass-fallback) !important; border-color: var(--color-border-default) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; } }