/* Canonical frame material tokens. Opt-in; no selectors paint existing pages.
 * Geometry stays in surfaces.css, emphasis is independent of material, and
 * section layout stays with its owning place. Sandbox previews consume this
 * same file through island.json; these values do not style Sandbox chrome. */
:where(:root, [data-ywe-theme]) {
  /* Recompute at boundaries and honor theme roles even when the preview sheet
     is injected after a theme. Root-only aliases freeze their inherited color. */
  --ywe-frame-flat: var(--ywe-theme-card, var(--ywe-color-paper, #fff));
  --ywe-frame-raised: var(--ywe-theme-background, var(--ywe-color-parchment, #fdf9f4));
  --ywe-frame-glass: var(--ywe-theme-glass, rgba(255, 255, 255, 0.72));
  --ywe-frame-glass-fallback: var(--ywe-theme-card, var(--ywe-color-paper, #fff));
  --ywe-frame-blur: 16px;
  --ywe-frame-rainbow: linear-gradient(115deg, #f3bdd6, #e8dcaa, #a7dfd3, #b9c5ee);
}
:root[data-theme="dark"]:not([data-ywe-theme]), :root.dark:not([data-ywe-theme]) {
  --ywe-frame-flat: #201f24;
  --ywe-frame-raised: #19181d;
  --ywe-frame-glass: rgba(28, 27, 32, 0.78);
  --ywe-frame-glass-fallback: #201f24;
}

/* Source-level material API. Enroll an owning frame/card explicitly; omission
   restores its original component styling. No geometry, type or layout rules. */
:is([data-ywe-ui="frame"], [data-ywe-ui="card"])[data-ywe-material="flat"] {
  background: var(--ywe-frame-flat);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
:is([data-ywe-ui="frame"], [data-ywe-ui="card"])[data-ywe-material="flat"]:not([data-ywe-elevation]) {
  box-shadow: none;
}
:is([data-ywe-ui="frame"], [data-ywe-ui="card"])[data-ywe-material="raised"] {
  background: var(--ywe-frame-raised);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
:is([data-ywe-ui="frame"], [data-ywe-ui="card"])[data-ywe-material="raised"]:not([data-ywe-elevation]) {
  box-shadow: var(--ywe-shadow-card);
}
:is([data-ywe-ui="frame"], [data-ywe-ui="card"])[data-ywe-material="glass"] {
  background: var(--ywe-frame-glass-fallback);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :is([data-ywe-ui="frame"], [data-ywe-ui="card"])[data-ywe-material="glass"] {
    background: var(--ywe-frame-glass);
    backdrop-filter: blur(var(--ywe-frame-blur)) saturate(1.1);
    -webkit-backdrop-filter: blur(var(--ywe-frame-blur)) saturate(1.1);
  }
}
/* A person may request opaque materials even on a blur-capable browser. */
@media (prefers-reduced-transparency: reduce) {
  :is([data-ywe-ui="frame"], [data-ywe-ui="card"])[data-ywe-material="glass"] {
    background: var(--ywe-frame-glass-fallback);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}