.asal-shell[data-ankarawi-ambient="active"] {
  --ankarawi-glass-topbar: color-mix(in srgb, var(--asal-surface) 50%, transparent);
  --ankarawi-glass-hero: color-mix(in srgb, var(--asal-surface-raised) 54%, transparent);
  --ankarawi-glass-card: color-mix(in srgb, var(--asal-surface) 46%, transparent);
  --ankarawi-glass-panel: color-mix(in srgb, var(--asal-surface-raised) 48%, transparent);
  --ankarawi-glass-muted: color-mix(in srgb, var(--asal-surface-muted) 44%, transparent);
  --ankarawi-glass-border: color-mix(in srgb, var(--asal-accent-strong) 28%, transparent);
  --ankarawi-glass-highlight: color-mix(in srgb, white 10%, transparent);
  --ankarawi-glass-shadow: 0 28px 80px rgb(0 0 0 / 24%);
  --ankarawi-glass-backdrop: blur(26px) saturate(1.18);
}

.asal-shell[data-ankarawi-ambient="active"][data-asal-theme="parchment"] {
  --ankarawi-glass-topbar: color-mix(in srgb, var(--asal-surface-raised) 72%, transparent);
  --ankarawi-glass-hero: color-mix(in srgb, var(--asal-surface-raised) 68%, transparent);
  --ankarawi-glass-card: color-mix(in srgb, var(--asal-surface) 64%, transparent);
  --ankarawi-glass-panel: color-mix(in srgb, var(--asal-surface-raised) 66%, transparent);
  --ankarawi-glass-muted: color-mix(in srgb, var(--asal-surface-muted) 62%, transparent);
  --ankarawi-glass-border: color-mix(in srgb, var(--asal-accent) 34%, transparent);
  --ankarawi-glass-highlight: rgb(255 255 255 / 34%);
  --ankarawi-glass-shadow: 0 24px 64px rgb(69 43 18 / 12%);
  --ankarawi-glass-backdrop: blur(24px) saturate(1.1);
}

.asal-shell[data-ankarawi-ambient="active"] .topbar {
  background:
    linear-gradient(135deg, var(--ankarawi-glass-highlight), transparent 44%),
    var(--ankarawi-glass-topbar);
  border-color: var(--ankarawi-glass-border);
  box-shadow:
    inset 0 1px 0 var(--ankarawi-glass-highlight),
    var(--ankarawi-glass-shadow);
  backdrop-filter: var(--ankarawi-glass-backdrop);
  -webkit-backdrop-filter: var(--ankarawi-glass-backdrop);
}

.asal-shell[data-ankarawi-ambient="active"] :is(.hero-card, .premium-hero, .quran-product-hero) {
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--asal-accent) 16%, transparent), transparent 15rem),
    linear-gradient(145deg, var(--ankarawi-glass-highlight), transparent 48%),
    var(--ankarawi-glass-hero) !important;
  border-color: var(--ankarawi-glass-border) !important;
  box-shadow:
    inset 0 1px 0 var(--ankarawi-glass-highlight),
    var(--ankarawi-glass-shadow) !important;
  backdrop-filter: blur(30px) saturate(1.2);
  -webkit-backdrop-filter: blur(30px) saturate(1.2);
}

.asal-shell[data-ankarawi-ambient="active"] :is(.card, .section-card, .module-card, .metric-card, .insight-panel) {
  background:
    linear-gradient(145deg, var(--ankarawi-glass-highlight), transparent 50%),
    var(--ankarawi-glass-card) !important;
  border-color: var(--ankarawi-glass-border) !important;
  box-shadow:
    inset 0 1px 0 var(--ankarawi-glass-highlight),
    0 22px 64px rgb(0 0 0 / 18%) !important;
  backdrop-filter: var(--ankarawi-glass-backdrop);
  -webkit-backdrop-filter: var(--ankarawi-glass-backdrop);
}

.asal-shell[data-ankarawi-ambient="active"] :is(.panel, .reader-surface, .fine-print-card, .ayah-practice-card, .recitation-ayah-card) {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--ankarawi-glass-highlight) 76%, transparent), transparent 54%),
    var(--ankarawi-glass-panel) !important;
  border-color: color-mix(in srgb, var(--ankarawi-glass-border) 82%, transparent) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--ankarawi-glass-highlight) 86%, transparent),
    0 18px 52px rgb(0 0 0 / 15%) !important;
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
}

.asal-shell[data-ankarawi-ambient="active"] :is(.theme-switcher-menu, .account-switcher-menu) {
  background:
    linear-gradient(145deg, var(--ankarawi-glass-highlight), transparent 46%),
    color-mix(in srgb, var(--asal-surface-raised) 58%, transparent) !important;
  border-color: var(--ankarawi-glass-border) !important;
  backdrop-filter: blur(28px) saturate(1.2);
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
}

.asal-shell[data-ankarawi-ambient="active"] :is(input, select, textarea) {
  background: color-mix(in srgb, var(--asal-surface-raised) 56%, transparent);
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
}

@media (max-width: 680px) {
  .asal-shell[data-ankarawi-ambient="active"] {
    --ankarawi-glass-backdrop: blur(20px) saturate(1.12);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .asal-shell[data-ankarawi-ambient="active"] {
    --ankarawi-glass-topbar: var(--asal-surface);
    --ankarawi-glass-hero: var(--asal-surface-raised);
    --ankarawi-glass-card: var(--asal-surface);
    --ankarawi-glass-panel: var(--asal-surface-raised);
  }
}