/* ==========================================================================
   DS v3 — Surface Utilities (utilities/glass.css)
   ==========================================================================

   `.ds-glass` permanece como contrato legado, mas o default agora é uma
   superfície sólida e produtiva. Vidro real, specular, noise e tilt passam a
   exigir opt-in por contexto: [data-material="glass"] ou [data-material="spatial"].
   ========================================================================== */

@layer ds-utilities {

  .ds-glass,
  .ds-glass-1,
  .ds-glass-2,
  .ds-glass-3,
  .ds-glass-4 {
    position: relative;
    min-width: 0;
    word-break: break-word;
    background: var(--ds-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: var(--ds-depth-1-border);
    border-radius: var(--ds-depth-1-radius);
    box-shadow: var(--ds-depth-1-shadow);
    transition:
      box-shadow var(--ds-duration-fast, 150ms) var(--ds-ease-out-expo),
      background var(--ds-duration-fast, 150ms) var(--ds-ease-out-expo),
      border-color var(--ds-duration-fast, 150ms) var(--ds-ease-out-expo);
  }

  .ds-glass--d2,
  .ds-glass-2 {
    background: var(--ds-surface-elevated);
    border: var(--ds-depth-2-border);
    border-radius: var(--ds-depth-2-radius);
    box-shadow: var(--ds-depth-2-shadow);
  }

  .ds-glass--d3,
  .ds-glass-3 {
    background: var(--ds-surface-elevated);
    border: var(--ds-depth-3-border);
    border-radius: var(--ds-depth-3-radius);
    box-shadow: var(--ds-depth-3-shadow);
  }

  .ds-glass--d4,
  .ds-glass-4 {
    background: var(--ds-surface-elevated);
    border: var(--ds-depth-4-border);
    border-radius: var(--ds-depth-4-radius);
    box-shadow: var(--ds-depth-4-shadow);
  }


  /* ─────────────────────────────────────────────────────────────────────
     OPT-IN GLASS MATERIAL
     ───────────────────────────────────────────────────────────────────── */

  [data-material="glass"] .ds-glass,
  [data-material="glass"] .ds-glass-1,
  [data-material="spatial"] .ds-glass,
  [data-material="spatial"] .ds-glass-1,
  .ds-glass[data-material="glass"],
  .ds-glass-1[data-material="glass"] {
    isolation: isolate;
    overflow: hidden;
    background: var(--ds-depth-1-bg);
    backdrop-filter: var(--ds-depth-1-blur);
    -webkit-backdrop-filter: var(--ds-depth-1-blur);
  }

  [data-material="glass"] .ds-glass--d2,
  [data-material="glass"] .ds-glass-2,
  [data-material="spatial"] .ds-glass--d2,
  [data-material="spatial"] .ds-glass-2,
  .ds-glass--d2[data-material="glass"],
  .ds-glass-2[data-material="glass"] {
    isolation: isolate;
    overflow: hidden;
    background: var(--ds-depth-2-bg);
    backdrop-filter: var(--ds-depth-2-blur);
    -webkit-backdrop-filter: var(--ds-depth-2-blur);
  }

  [data-material="glass"] .ds-glass--d3,
  [data-material="glass"] .ds-glass-3,
  [data-material="spatial"] .ds-glass--d3,
  [data-material="spatial"] .ds-glass-3,
  .ds-glass--d3[data-material="glass"],
  .ds-glass-3[data-material="glass"] {
    isolation: isolate;
    overflow: hidden;
    background: var(--ds-depth-3-bg);
    backdrop-filter: var(--ds-depth-3-blur);
    -webkit-backdrop-filter: var(--ds-depth-3-blur);
  }

  [data-material="glass"] .ds-glass--d4,
  [data-material="glass"] .ds-glass-4,
  [data-material="spatial"] .ds-glass--d4,
  [data-material="spatial"] .ds-glass-4,
  .ds-glass--d4[data-material="glass"],
  .ds-glass-4[data-material="glass"] {
    isolation: isolate;
    overflow: hidden;
    background: var(--ds-depth-4-bg);
    backdrop-filter: var(--ds-depth-4-blur);
    -webkit-backdrop-filter: var(--ds-depth-4-blur);
  }

  [data-material="glass"] .ds-glass::before,
  [data-material="glass"] .ds-glass-1::before,
  [data-material="glass"] .ds-glass--d2::before,
  [data-material="glass"] .ds-glass-2::before,
  [data-material="glass"] .ds-glass--d3::before,
  [data-material="glass"] .ds-glass-3::before,
  [data-material="glass"] .ds-glass--d4::before,
  [data-material="glass"] .ds-glass-4::before,
  [data-material="spatial"] .ds-glass::before,
  [data-material="spatial"] .ds-glass-1::before,
  [data-material="spatial"] .ds-glass--d2::before,
  [data-material="spatial"] .ds-glass-2::before,
  [data-material="spatial"] .ds-glass--d3::before,
  [data-material="spatial"] .ds-glass-3::before,
  [data-material="spatial"] .ds-glass--d4::before,
  [data-material="spatial"] .ds-glass-4::before,
  .ds-glass[data-material="glass"]::before,
  .ds-glass-1[data-material="glass"]::before,
  .ds-glass--d2[data-material="glass"]::before,
  .ds-glass-2[data-material="glass"]::before,
  .ds-glass--d3[data-material="glass"]::before,
  .ds-glass-3[data-material="glass"]::before,
  .ds-glass--d4[data-material="glass"]::before,
  .ds-glass-4[data-material="glass"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ds-glass-specular-light);
    pointer-events: none;
    border-radius: inherit;
  }

  [data-material="glass"] .ds-glass--d3::after,
  [data-material="glass"] .ds-glass-3::after,
  [data-material="glass"] .ds-glass--d4::after,
  [data-material="glass"] .ds-glass-4::after,
  [data-material="spatial"] .ds-glass--d3::after,
  [data-material="spatial"] .ds-glass-3::after,
  [data-material="spatial"] .ds-glass--d4::after,
  [data-material="spatial"] .ds-glass-4::after,
  .ds-glass--d3[data-material="glass"]::after,
  .ds-glass-3[data-material="glass"]::after,
  .ds-glass--d4[data-material="glass"]::after,
  .ds-glass-4[data-material="glass"]::after,
  .ds-glass[data-noise]::after,
  .ds-glass-1[data-noise]::after,
  .ds-glass-2[data-noise]::after,
  .ds-glass-3[data-noise]::after,
  .ds-glass-4[data-noise]::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--ds-glass-noise-url);
    background-size: 200px 200px;
    opacity: var(--ds-glass-noise-opacity-light);
    mix-blend-mode: overlay;
    pointer-events: none;
    border-radius: inherit;
  }

  [data-theme="dark"] .ds-glass::before,
  [data-theme="dark"] .ds-glass-1::before,
  [data-theme="dark"] .ds-glass--d2::before,
  [data-theme="dark"] .ds-glass-2::before,
  [data-theme="dark"] .ds-glass--d3::before,
  [data-theme="dark"] .ds-glass-3::before,
  [data-theme="dark"] .ds-glass--d4::before,
  [data-theme="dark"] .ds-glass-4::before,
  :root[data-theme-effective="dark"] .ds-glass::before,
  :root[data-theme-effective="dark"] .ds-glass-1::before,
  :root[data-theme-effective="dark"] .ds-glass--d2::before,
  :root[data-theme-effective="dark"] .ds-glass-2::before,
  :root[data-theme-effective="dark"] .ds-glass--d3::before,
  :root[data-theme-effective="dark"] .ds-glass-3::before,
  :root[data-theme-effective="dark"] .ds-glass--d4::before,
  :root[data-theme-effective="dark"] .ds-glass-4::before {
    background: var(--ds-glass-specular-dark);
  }

  [data-theme="dark"] .ds-glass::after,
  [data-theme="dark"] .ds-glass-1::after,
  [data-theme="dark"] .ds-glass--d2::after,
  [data-theme="dark"] .ds-glass-2::after,
  [data-theme="dark"] .ds-glass--d3::after,
  [data-theme="dark"] .ds-glass-3::after,
  [data-theme="dark"] .ds-glass--d4::after,
  [data-theme="dark"] .ds-glass-4::after,
  :root[data-theme-effective="dark"] .ds-glass::after,
  :root[data-theme-effective="dark"] .ds-glass-1::after,
  :root[data-theme-effective="dark"] .ds-glass--d2::after,
  :root[data-theme-effective="dark"] .ds-glass-2::after,
  :root[data-theme-effective="dark"] .ds-glass--d3::after,
  :root[data-theme-effective="dark"] .ds-glass-3::after,
  :root[data-theme-effective="dark"] .ds-glass--d4::after,
  :root[data-theme-effective="dark"] .ds-glass-4::after {
    opacity: var(--ds-glass-noise-opacity-dark);
  }


  /* ─────────────────────────────────────────────────────────────────────
     MODIFICADORES
     ───────────────────────────────────────────────────────────────────── */

  .ds-glass--accent {
    border-color: var(--ds-glass-border-accent);
    box-shadow:
      var(--ds-depth-1-shadow),
      var(--ds-glass-glow-primary);
  }

  .ds-glass--d2.ds-glass--accent {
    box-shadow:
      var(--ds-depth-2-shadow),
      var(--ds-glass-glow-primary);
  }

  .ds-glass--d3.ds-glass--accent {
    box-shadow:
      var(--ds-depth-3-shadow),
      var(--ds-glass-glow-primary-lg);
  }

  .ds-glass--d4.ds-glass--accent {
    box-shadow:
      var(--ds-depth-4-shadow),
      var(--ds-glass-glow-primary-lg);
  }

  .ds-glass--interactive {
    cursor: pointer;
  }

  .ds-glass--interactive:hover {
    border-color: var(--ds-glass-border-accent);
    box-shadow: var(--ds-depth-2-shadow);
  }

  [data-motion="expressive"] .ds-glass--interactive:hover,
  .ds-glass--interactive[data-motion="expressive"]:hover {
    transform: translateY(-1px);
  }

  .ds-glass--interactive:active {
    transform: translateY(0);
    transition:
      box-shadow var(--ds-duration-fast) var(--ds-ease-sharp),
      transform var(--ds-duration-fast) var(--ds-ease-sharp);
  }

  .ds-glass--interactive.ds-glass--accent:hover {
    box-shadow:
      var(--ds-depth-2-shadow),
      var(--ds-glass-glow-primary);
  }


  /* ─────────────────────────────────────────────────────────────────────
     FALLBACKS E ACESSIBILIDADE
     ───────────────────────────────────────────────────────────────────── */

  @supports not (backdrop-filter: blur(1px)) {
    .ds-glass,
    .ds-glass-1,
    .ds-glass--d2,
    .ds-glass-2,
    .ds-glass--d3,
    .ds-glass-3,
    .ds-glass--d4,
    .ds-glass-4 {
      background: var(--ds-glass-bg-solid);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }

  @media (prefers-contrast: more), (prefers-reduced-motion: reduce) {
    .ds-glass,
    .ds-glass-1,
    .ds-glass--d2,
    .ds-glass-2,
    .ds-glass--d3,
    .ds-glass-3,
    .ds-glass--d4,
    .ds-glass-4 {
      background: var(--ds-glass-bg-solid);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      transition: none;
    }

    .ds-glass::before,
    .ds-glass-1::before,
    .ds-glass--d2::before,
    .ds-glass-2::before,
    .ds-glass--d3::before,
    .ds-glass-3::before,
    .ds-glass--d4::before,
    .ds-glass-4::before,
    .ds-glass::after,
    .ds-glass-1::after,
    .ds-glass--d2::after,
    .ds-glass-2::after,
    .ds-glass--d3::after,
    .ds-glass-3::after,
    .ds-glass--d4::after,
    .ds-glass-4::after {
      display: none;
    }

    .ds-glass--interactive:hover,
    .ds-glass--interactive:active {
      transform: none;
    }
  }

  [data-glass-reduced] .ds-glass,
  [data-glass-reduced] .ds-glass-1,
  [data-glass-reduced] .ds-glass--d2,
  [data-glass-reduced] .ds-glass-2,
  [data-glass-reduced] .ds-glass--d3,
  [data-glass-reduced] .ds-glass-3,
  [data-glass-reduced] .ds-glass--d4,
  [data-glass-reduced] .ds-glass-4 {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: none;
  }


  /* ─────────────────────────────────────────────────────────────────────
     TEXTO, FOCO E TILT
     ───────────────────────────────────────────────────────────────────── */

  .ds-glass-text {
    text-shadow:
      0 1px 2px oklch(0% 0 0 / 0.10);
  }

  @media (prefers-contrast: more) {
    .ds-glass-text {
      text-shadow: none;
    }
  }

  .ds-glass:focus-visible,
  .ds-glass-1:focus-visible,
  .ds-glass--d2:focus-visible,
  .ds-glass-2:focus-visible,
  .ds-glass--d3:focus-visible,
  .ds-glass-3:focus-visible,
  .ds-glass--d4:focus-visible,
  .ds-glass-4:focus-visible,
  .ds-glass--interactive:focus-visible {
    outline: 2px solid oklch(100% 0 0 / 0.9);
    outline-offset: 2px;
    box-shadow:
      0 0 0 1px oklch(0% 0 0 / 0.3),
      0 0 0 4px var(--ds-primary);
  }

  :root:not([data-motion="expressive"]) [data-glass-tilt] {
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  [data-motion="expressive"] [data-glass-tilt] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }

  [data-motion="expressive"] [data-glass-tilt]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(
      circle at var(--ds-glass-hilight-x, 50%) var(--ds-glass-hilight-y, 50%),
      oklch(100% 0 0 / 0.16) 0%,
      transparent 60%
    );
    transition: background var(--ds-duration-fast, 150ms) var(--ds-ease-sharp);
  }

  [data-theme="light"] [data-motion="expressive"] [data-glass-tilt]::before {
    background: radial-gradient(
      circle at var(--ds-glass-hilight-x, 50%) var(--ds-glass-hilight-y, 50%),
      oklch(60% 0.08 210 / 0.14) 0%,
      transparent 60%
    );
  }

  [data-glass-reduced] [data-glass-tilt]::before {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    [data-glass-tilt]::before {
      display: none;
    }
  }

  ds-card[data-glass-tilt] {
    overflow: visible;
  }

}