/* Paint-only material layer: keep component geometry, colors and interaction states. */
:root[data-liquid-glass] {
  --lg-card-density: 78%;
  --lg-window-density: 88%;
  --lg-blur: 20px;
  --lg-window-blur: 32px;
  --lg-control-blur: 8px;
  --lg-glint: #ffffff24;
  --lg-edge: #ffffff30;
  --lg-edge-soft: #ffffff0c;
  --lg-shadow: #00000027;
  --lg-window-shadow: #00000066;
  --lg-category-base: #1b1821;
  --lg-sheen: linear-gradient(135deg, var(--lg-glint), #ffffff04 28%, transparent 48%, #ffffff03 74%, var(--lg-edge-soft));
  --lg-card-shadow: inset 0 1px 0 var(--lg-edge), inset 1px 0 0 var(--lg-edge-soft), inset 0 -1px 0 #ffffff08, inset 0 8px 18px -15px #ffffff70, 0 10px 32px -12px var(--lg-shadow);
  --lg-control-shadow: inset 0 1px 0 var(--lg-edge), inset 0 -1px 0 #0000000d, inset 1px 0 0 var(--lg-edge-soft), inset 0 8px 12px -10px #ffffff8a, 0 3px 10px -5px var(--lg-shadow);
}
:root[data-liquid-glass][data-theme=light] {
  --lg-glint: #ffffffd9;
  --lg-edge: #ffffffed;
  --lg-edge-soft: #ffffff63;
  --lg-shadow: #3c62782b;
  --lg-window-shadow: #233d6338;
  --lg-category-base: #f8fbfd;
}

/* Independent card surfaces. No pseudo-elements: existing spotlight/glow remains. */
:root[data-liquid-glass] :is(
  .project-card, .market-asset-card, .purchase-card, .token-trade-panel,
  .sp-workbench, .tz-experience, .ps-surface, .market-wallet,
  .dash-card, .dash-bank-card, .dash-api-card, .dash-referral-card,
  .referral-invite-card, .cash-wallet-card, .dash-wallet-option
) {
  background: var(--lg-sheen), color-mix(in srgb, var(--lg-base, var(--card)) var(--lg-card-density), transparent);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(1.25);
  backdrop-filter: blur(var(--lg-blur)) saturate(1.25);
  box-shadow: var(--lg-card-shadow);
}
.tz-experience { --lg-base: var(--tz-panel); }
.ps-surface { --lg-base: var(--ps-surface); }
.market-asset-card, .market-wallet { --lg-base: var(--mk-panel); }
.token-trade-panel { --lg-base: var(--trade-bg); }
.dash-card, .dash-bank-card, .dash-api-card, .dash-wallet-option { --lg-base: var(--dash-card); }
.cash-wallet-card { --lg-base: var(--cash-surface); }
.dash-referral-card, .referral-invite-card { --lg-base: #102624; }
:root[data-theme=light] .dash-referral-card { --lg-base: #edf7f5; }
/* The invite card intentionally retains light lettering in both themes. */
:root[data-liquid-glass] .referral-invite-card {
  --lg-card-density: 96%;
  --lg-glint: #ffffff18;
  --lg-edge: #ffffff30;
  --lg-edge-soft: #ffffff0c;
  --lg-sheen: linear-gradient(135deg, #ffffff18, #ffffff03 28%, transparent 48%, #ffffff03 74%, #ffffff0c);
}
:root[data-liquid-glass] .project-card .card-compact { background: transparent; }

/* Category cards retain their active borders and pointer-following edge light. */
:root[data-liquid-glass] .category-tabs.opportunity-cards {
  --category-surface: var(--lg-sheen), color-mix(in srgb, var(--lg-category-base) var(--lg-card-density), transparent);
}
:root[data-liquid-glass] .category-tabs.opportunity-cards [data-slot=tabs-trigger] {
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(1.3);
  backdrop-filter: blur(var(--lg-blur)) saturate(1.3);
  box-shadow: var(--lg-card-shadow);
}
:root[data-liquid-glass] .category-tabs.opportunity-cards [data-slot=tabs-trigger][data-active] {
  box-shadow: var(--lg-card-shadow), inset 0 0 0 1px var(--category-edge);
}

/* Inner surfaces need edge reflections only, avoiding nested heavy blur. */
:root[data-liquid-glass] :is(.ps-action, .tz-step, .sp-result, .chat-welcome>button, .wallet-provider-list>button, .wallet-qr-option) {
  box-shadow: var(--lg-control-shadow);
}
:root[data-liquid-glass] .ps-action {
  background: var(--lg-sheen), color-mix(in srgb, var(--ps-card) var(--lg-card-density), transparent);
}
:root[data-liquid-glass] .ps-action:hover {
  background: var(--lg-sheen), var(--ps-card-hover);
  box-shadow: var(--lg-control-shadow), 0 8px 20px -8px var(--lg-shadow);
}

/* Reflective controls retain each component's original fill and semantic colors. */
:root[data-liquid-glass] :is(
  .primary-button, .secondary-button, .purchase-button, .trade-submit, .dash-primary,
  .tz-start, .tz-consult, .tz-guide, .tz-guide-close,
  .nav-actions .login, .nav-actions .app-button, .nav-actions .theme-toggle,
  .nav-actions .account-trigger, .track-controls>button, .dash-icon-button,
  .referral-share>a, .referral-share>button, .trade-presets>button, .cash-presets>button,
  .chat-form>button, .assistant-trigger.assistant-brand-trigger,
  [data-slot=button]:not([data-variant=ghost], [data-variant=link])
) {
  box-shadow: var(--lg-control-shadow), var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000);
  -webkit-backdrop-filter: blur(var(--lg-control-blur)) saturate(1.2);
  backdrop-filter: blur(var(--lg-control-blur)) saturate(1.2);
}

/* Floating windows: enough opacity for readable text, with light refracted edges.
   !important here supersedes legacy modal background declarations only. */
:root[data-liquid-glass][data-theme] :is(
  [data-slot=dialog-content], [data-slot=alert-dialog-content],
  [data-slot=sheet-content], [data-slot=popover-content],
  [data-slot=select-content], [data-slot=dropdown-menu-content],
  [data-slot=dropdown-menu-sub-content]
) {
  background: var(--lg-sheen), color-mix(in srgb, var(--lg-window-base, var(--popover)) var(--lg-window-density), transparent) !important;
  -webkit-backdrop-filter: blur(var(--lg-window-blur)) saturate(1.3);
  backdrop-filter: blur(var(--lg-window-blur)) saturate(1.3);
  box-shadow: inset 0 1px 0 var(--lg-edge), inset 1px 0 0 var(--lg-edge-soft), inset -1px 0 0 var(--lg-edge-soft), inset 0 -1px 0 #ffffff12, 0 24px 80px -20px var(--lg-window-shadow);
}
.trade-dialog { --lg-window-base: var(--trade-bg); }
.public-wallet-dialog { --lg-window-base: var(--wallet-bg); }
.identity-modal { --lg-window-base: var(--dash-card); }
.tz-guide-dialog { --lg-window-base: var(--card); }
:root[data-liquid-glass][data-theme=light] .assistant-panel { --lg-window-base: #f7fbfc; }

/* Navigation already has its own glass fill; add the same polished edge. */
:root[data-liquid-glass] .site-nav.island {
  box-shadow: var(--lg-card-shadow), 0 14px 40px -20px var(--lg-shadow);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(1.3);
  backdrop-filter: blur(var(--lg-blur)) saturate(1.3);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-liquid-glass] { --lg-card-density: 100%; --lg-window-density: 100%; }
  :root[data-liquid-glass] .referral-invite-card { --lg-card-density: 100%; }
}
@media (prefers-reduced-transparency: reduce) {
  :root[data-liquid-glass] { --lg-card-density: 100%; --lg-window-density: 100%; --lg-blur: 0px; --lg-window-blur: 0px; --lg-control-blur: 0px; }
  :root[data-liquid-glass] .referral-invite-card { --lg-card-density: 100%; }
}
@media (forced-colors: active) {
  :root[data-liquid-glass] { --lg-glint: transparent; --lg-edge: transparent; --lg-edge-soft: transparent; --lg-shadow: transparent; --lg-window-shadow: transparent; --lg-card-density: 100%; --lg-window-density: 100%; --lg-blur: 0px; --lg-window-blur: 0px; --lg-control-blur: 0px; }
}