/*
  Wortic macOS UI Kit — Materials
  Vibrancy/glass usado com parcimônia: apenas em superfícies que
  semanticamente flutuam sobre conteúdo (sidebar, toolbar, popover,
  sheet, HUD). Nunca aplicar em conteúdo estático empilhado.

  Receita Liquid Glass: blur 40-56px + saturate ~2 + fundo rgba com
  alpha 0.55-0.85 + borda interna CLARA hairline (inset, 0.5px).
*/

@layer base {
  .wm-material-sidebar {
    background: var(--wm-material-sidebar-bg);
    backdrop-filter: blur(var(--wm-material-blur)) saturate(var(--wm-material-saturate));
    -webkit-backdrop-filter: blur(var(--wm-material-blur)) saturate(var(--wm-material-saturate));
  }

  .wm-material-toolbar {
    background: var(--wm-material-toolbar-bg);
    backdrop-filter: blur(var(--wm-material-blur)) saturate(var(--wm-material-saturate));
    -webkit-backdrop-filter: blur(var(--wm-material-blur)) saturate(var(--wm-material-saturate));
    box-shadow: var(--wm-shadow-inner-highlight, inset 0 1px 0 rgba(255, 255, 255, 0.18));
  }

  .wm-material-popover {
    background: var(--wm-material-popover-bg);
    backdrop-filter: blur(var(--wm-material-blur)) saturate(var(--wm-material-saturate));
    -webkit-backdrop-filter: blur(var(--wm-material-blur)) saturate(var(--wm-material-saturate));
    border: var(--wm-border-width-hairline) solid var(--wm-material-glass-border);
    box-shadow: var(--wm-shadow-inner-highlight, inset 0 1px 0 rgba(255, 255, 255, 0.18));
  }

  .wm-material-sheet {
    background: var(--wm-material-sheet-bg);
    backdrop-filter: blur(var(--wm-material-blur-heavy, 56px)) saturate(var(--wm-material-saturate));
    -webkit-backdrop-filter: blur(var(--wm-material-blur-heavy, 56px)) saturate(var(--wm-material-saturate));
    box-shadow: var(--wm-shadow-inner-hairline, inset 0 0 0 0.5px rgba(255, 255, 255, 0.4));
  }

  .wm-material-hud {
    background: var(--wm-material-hud-bg);
    color: var(--wm-material-hud-label);
    backdrop-filter: blur(var(--wm-material-blur)) saturate(1.6);
    -webkit-backdrop-filter: blur(var(--wm-material-blur)) saturate(1.6);
    border: var(--wm-border-width-hairline) solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .wm-material-card {
    background: var(--wm-surface-elevated);
    border: var(--wm-border-width-hairline) solid var(--wm-separator);
    box-shadow: var(--wm-shadow-inner-highlight, inset 0 1px 0 rgba(255, 255, 255, 0.18));
  }

  .wm-material-glass {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.16),
      rgba(255, 255, 255, 0.05)
    );
    backdrop-filter: blur(var(--wm-material-blur)) saturate(var(--wm-material-saturate));
    -webkit-backdrop-filter: blur(var(--wm-material-blur)) saturate(var(--wm-material-saturate));
    border: var(--wm-border-width-hairline) solid var(--wm-material-glass-border);
    box-shadow: var(--wm-shadow-inner-hairline, inset 0 0 0 0.5px rgba(255, 255, 255, 0.4));
  }

  /* Reduced transparency: materiais colapsam para superfícies sólidas */
  @media (prefers-reduced-transparency: reduce) {
    .wm-material-sidebar,
    .wm-material-toolbar,
    .wm-material-popover,
    .wm-material-sheet,
    .wm-material-hud,
    .wm-material-glass {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      background: var(--wm-surface-elevated);
    }

    .wm-material-hud {
      background: var(--wm-material-hud-bg);
    }
  }
}