/* Glass surface — Figma: white 60%, border, shadow, backdrop blur */

.glass-surface {
  background-color: rgba(255, 255, 255, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.03);
}

html[data-pattern-bg="true"] .glass-surface,
html[data-image-bg="true"] .glass-surface {
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}

html[data-theme="dark"] .glass-surface {
  background-color: color-mix(in oklch, var(--container) 60%, transparent);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
}

.glass-surface--flat {
  box-shadow: none;
}

.glass-surface--selected {
  background-color: rgba(255, 255, 255, 0.85) !important;
}

html[data-theme="dark"] .glass-surface--selected {
  background-color: color-mix(in oklch, var(--container) 85%, transparent) !important;
}

/* Figma disabled category: white 40%, 2px border, blur 12 */
.glass-surface--disabled {
  background-color: rgba(255, 255, 255, 0.4) !important;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: none;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

html[data-pattern-bg="true"] .glass-surface--disabled,
html[data-image-bg="true"] .glass-surface--disabled {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

html[data-theme="dark"] .glass-surface--disabled {
  background-color: color-mix(in oklch, var(--container) 40%, transparent) !important;
  border-color: rgba(255, 255, 255, 0.2);
}

.glass-surface-nav {
  background-color: rgba(255, 255, 255, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0px -2px 14px 0px rgba(0, 0, 0, 0.15);
}

html[data-pattern-bg="true"] .glass-surface-nav,
html[data-image-bg="true"] .glass-surface-nav {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

html[data-theme="dark"] .glass-surface-nav {
  background-color: color-mix(in oklch, var(--container) 32%, transparent);
  border-color: rgba(255, 255, 255, 0.2);
}
