/* ==========================================================================
   DS v3 — Utilitário de Superfície de Vidro (utilities/glass.css)
   Issue: #208 · Parent: #189 (FASE-1)
   ==========================================================================

   A PRIMITIVA CENTRAL DO DS v3.

   `.ds-glass` é o bloco de construção de toda superfície translúcida do
   sistema. Aplicável diretamente como classe utilitária ou como base para
   componentes. Define o "material" da superfície — não apenas aparência,
   mas comportamento físico completo: desfoque, reflexo especular, textura
   de ruído, sombra em camadas e transições spring.

   HIERARQUIA DE PROFUNDIDADE:
   ┌──────────────────────────────────────────────────────┐
   │  .ds-glass       → depth-1 (cards, painéis, tabelas) │
   │  .ds-glass--d2   → depth-2 (dropdowns, popovers)     │
   │  .ds-glass--d3   → depth-3 (modais, drawers)         │
   │  .ds-glass--d4   → depth-4 (toasts, spotlight)       │
   └──────────────────────────────────────────────────────┘

   ALIASES LEGADOS (compatibilidade com templates existentes):
   .ds-glass-1 → .ds-glass
   .ds-glass-2 → .ds-glass--d2
   .ds-glass-3 → .ds-glass--d3
   .ds-glass-4 → .ds-glass--d4

   MODIFICADORES SEMÂNTICOS:
   .ds-glass--accent      → borda cyan + glow primário
   .ds-glass--interactive → hover elevation + cursor pointer

   PSEUDO-ELEMENTOS:
   ::before → reflexo especular (luz de cima-esquerda)
   ::after  → textura de ruído (grain de vidro)

   Depende de: tokens/glass.css, tokens/depth.css, tokens/easing.css
   Consumido por: todos os templates DS v3 após FASE-1
   ========================================================================== */

@layer ds-utilities {

  /* ═══════════════════════════════════════════════════════════════════════
     BASE — .ds-glass (depth-1)
     Material Ancorado: superfícies ao nível da página.
     Blur moderado (16px), opacidade 78%, sombra mínima.
     ═══════════════════════════════════════════════════════════════════════ */

  .ds-glass,
  .ds-glass-1,
  .ds-glass-2,
  .ds-glass-3,
  .ds-glass-4 {
    position: relative;
    isolation: isolate;       /* stacking context próprio — isola z-index dos filhos */
    overflow: hidden;         /* contém pseudo-elementos (specular + noise) */

    background: var(--ds-depth-1-bg);
    backdrop-filter: var(--ds-depth-1-blur);
    -webkit-backdrop-filter: var(--ds-depth-1-blur);

    border: var(--ds-depth-1-border);
    border-radius: var(--ds-depth-1-radius);
    box-shadow: var(--ds-depth-1-shadow);

    /*
      Transições: spring para transform (movimento natural),
      expo para shadow (percepção de profundidade), sharp para background
      (mudança de estado deve ser rápida, não "borralhenta").
    */
    transition:
      box-shadow  var(--ds-duration-normal) var(--ds-ease-out-expo),
      background  var(--ds-duration-normal) var(--ds-ease-sharp),
      transform   var(--ds-duration-normal) var(--ds-ease-spring-1);
  }

  /* ─── Reflexo especular — luz proveniente do canto superior esquerdo ─── */
  /*
    Simula a reflexão de luz em uma superfície de vidro inclinada.
    O gradiente a 135° posiciona o brilho na borda superior-esquerda,
    fade para transparente no meio-inferior — exatamente como vidro real.
    pointer-events: none garante que não interfere com cliques.
  */
  .ds-glass::before,
  .ds-glass-1::before,
  .ds-glass-2::before,
  .ds-glass-3::before,
  .ds-glass-4::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ds-glass-specular-light);
    pointer-events: none;
    /* Sem z-index explícito: ::before empilha abaixo dos filhos por ordem DOM
       dentro do stacking context criado por isolation: isolate. z-index: 1
       causaria o specular (55% opacidade) a cobrir texto e elementos interativos. */
    border-radius: inherit;
  }

  /* ─── Noise grain — textura de ruído para materialidade do vidro ─── */
  /*
    Vidro real nunca é perfeitamente liso — tem micro-imperfeições.
    O SVG fractalNoise cria essa textura de forma barata (zero HTTP request).
    mix-blend-mode: overlay adiciona o grain sem mudar a cor dominante.
    Sem z-index explícito: ::after com opacity 0.028 é visualmente inofensivo
    sobre o conteúdo. Filhos que precisem de garantia de posicionamento
    devem usar position: relative.
  */
  .ds-glass::after,
  .ds-glass-1::after,
  .ds-glass-2::after,
  .ds-glass-3::after,
  .ds-glass-4::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;
  }


  /* ═══════════════════════════════════════════════════════════════════════
     MODIFICADORES DE PROFUNDIDADE
     Cada modificador substitui TODAS as propriedades materiais do nível,
     mantendo os pseudo-elementos (specular + noise) do .ds-glass base.
     ═══════════════════════════════════════════════════════════════════════ */

  /* ─── depth-2: Superfícies Elevadas (dropdowns, popovers) ─── */
  .ds-glass--d2,
  .ds-glass-2 {
    background:        var(--ds-depth-2-bg);
    backdrop-filter:   var(--ds-depth-2-blur);
    -webkit-backdrop-filter: var(--ds-depth-2-blur);
    border:            var(--ds-depth-2-border);
    border-radius:     var(--ds-depth-2-radius);
    box-shadow:        var(--ds-depth-2-shadow);
  }

  /* ─── depth-3: Superfícies Flutuantes (modais, drawers) ─── */
  .ds-glass--d3,
  .ds-glass-3 {
    background:        var(--ds-depth-3-bg);
    backdrop-filter:   var(--ds-depth-3-blur);
    -webkit-backdrop-filter: var(--ds-depth-3-blur);
    border:            var(--ds-depth-3-border);
    border-radius:     var(--ds-depth-3-radius);
    box-shadow:        var(--ds-depth-3-shadow);
  }

  /* ─── depth-4: Superfícies Críticas (toasts, command palette) ─── */
  .ds-glass--d4,
  .ds-glass-4 {
    background:        var(--ds-depth-4-bg);
    backdrop-filter:   var(--ds-depth-4-blur);
    -webkit-backdrop-filter: var(--ds-depth-4-blur);
    border:            var(--ds-depth-4-border);
    border-radius:     var(--ds-depth-4-radius);
    box-shadow:        var(--ds-depth-4-shadow);
  }


  /* ═══════════════════════════════════════════════════════════════════════
     MODIFICADORES SEMÂNTICOS
     Alteram o comportamento/identidade sem mudar o nível de profundidade.
     Combinam com os modificadores de depth: .ds-glass.ds-glass--d2.ds-glass--accent
     ═══════════════════════════════════════════════════════════════════════ */

  /* ─── accent: identidade primária — borda cyan + glow ─── */
  /*
    Usado para elementos em estado "ativo", "selecionado" ou "destaque".
    O glow primário sinaliza presença sem competir com o conteúdo.
    Combina bem com --d2 para dropdowns de ação primária.
  */
  .ds-glass--accent {
    border-color: var(--ds-glass-border-accent);
    box-shadow:
      var(--ds-depth-1-shadow),
      var(--ds-glass-glow-primary);
  }

  /* accent + d2: glow mais intenso para overlays com identidade */
  .ds-glass--d2.ds-glass--accent {
    box-shadow:
      var(--ds-depth-2-shadow),
      var(--ds-glass-glow-primary);
  }

  /* accent + d3: modais e drawers com glow accent */
  .ds-glass--d3.ds-glass--accent {
    box-shadow:
      var(--ds-depth-3-shadow),
      var(--ds-glass-glow-primary-lg);
  }

  /* accent + d4: toasts, alerts e spotlight com anel accent e glow máximo */
  .ds-glass--d4.ds-glass--accent {
    box-shadow:
      var(--ds-depth-4-shadow),
      var(--ds-glass-glow-primary-lg);
  }

  /* ─── interactive: hover elevation + pointer ─── */
  /*
    Para cards e superfícies clicáveis. O translateY(-2px) cria sensação
    de "lift" físico. O glow white é sutil — não compete com accent.
    O :active reverte imediatamente para feedback tátil.
  */
  .ds-glass--interactive {
    cursor: pointer;
  }

  .ds-glass--interactive:hover {
    transform: translateY(-2px);
    box-shadow:
      var(--ds-depth-2-shadow),
      var(--ds-glass-glow-white);
  }

  .ds-glass--interactive:active {
    transform: translateY(0);
    /* Transition completa com ease-sharp: saída imediata sem bounce spring */
    transition:
      box-shadow  var(--ds-duration-fast) var(--ds-ease-sharp),
      transform   var(--ds-duration-fast) var(--ds-ease-sharp);
  }

  /* interactive + accent: hover com glow primário */
  .ds-glass--interactive.ds-glass--accent:hover {
    box-shadow:
      var(--ds-depth-2-shadow),
      var(--ds-glass-glow-primary);
  }


  /* ═══════════════════════════════════════════════════════════════════════
     DARK THEME
     Os tokens glass.css já redirecionam --ds-glass-bg-* e --ds-depth-*-bg
     para variantes dark. Aqui apenas ajustamos specular e noise
     explicitamente para compatibilidade com seletores específicos.
     ═══════════════════════════════════════════════════════════════════════ */

  /*
    Nota: --ds-glass-specular-light já é redefinido para --ds-glass-specular-dark
    e --ds-glass-noise-opacity-light para --ds-glass-noise-opacity-dark via
    os overrides de [data-theme="dark"] em glass.css (tokens). Os seletores
    abaixo são mantidos para garantia e clareza semântica.
  */

  [data-theme="dark"] .ds-glass::before,
  [data-theme="dark"] .ds-glass-1::before,
  [data-theme="dark"] .ds-glass-2::before,
  [data-theme="dark"] .ds-glass-3::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-2::before,
  :root[data-theme-effective="dark"] .ds-glass-3::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-2::after,
  [data-theme="dark"] .ds-glass-3::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-2::after,
  :root[data-theme-effective="dark"] .ds-glass-3::after,
  :root[data-theme-effective="dark"] .ds-glass-4::after {
    opacity: var(--ds-glass-noise-opacity-dark);
  }


  /* ═══════════════════════════════════════════════════════════════════════
     FALLBACK — @supports not (backdrop-filter)
     Browsers sem suporte: Firefox < 103, Chrome < 76, Safari < 9.
     Usa background opaco para manter legibilidade.
     ═══════════════════════════════════════════════════════════════════════ */

  @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 já é ignorado, não precisa zerar */
    }
  }


  /* ═══════════════════════════════════════════════════════════════════════
     ACESSIBILIDADE — prefers-contrast: more
     Desativa translucência completamente para garantir contraste máximo.
     Bordas sólidas substituem as translúcidas.
     ═══════════════════════════════════════════════════════════════════════ */

  /*
    Usuários com low-vision ou daltônicos configurados com "high contrast"
    no sistema operacional precisam de bordas sólidas e backgrounds opacos.
    Os tokens já lidam com blur (depth.css), aqui zeramos explicitamente
    nos elementos que usam as classes utilitárias.
  */
  @media (prefers-contrast: more) {
    .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;
      /* Borda opaca para garantir contraste tanto em light quanto dark theme */
      border-color: oklch(0% 0 0 / 0.65);
    }

    /* Dark theme: borda clara sobre fundo escuro */
    [data-theme="dark"] .ds-glass,
    [data-theme="dark"] .ds-glass-1,
    [data-theme="dark"] .ds-glass--d2,
    [data-theme="dark"] .ds-glass-2,
    [data-theme="dark"] .ds-glass--d3,
    [data-theme="dark"] .ds-glass-3,
    [data-theme="dark"] .ds-glass--d4,
    [data-theme="dark"] .ds-glass-4,
    :root[data-theme-effective="dark"] .ds-glass,
    :root[data-theme-effective="dark"] .ds-glass-1,
    :root[data-theme-effective="dark"] .ds-glass--d2,
    :root[data-theme-effective="dark"] .ds-glass-2,
    :root[data-theme-effective="dark"] .ds-glass--d3,
    :root[data-theme-effective="dark"] .ds-glass-3,
    :root[data-theme-effective="dark"] .ds-glass--d4,
    :root[data-theme-effective="dark"] .ds-glass-4 {
      border-color: oklch(100% 0 0 / 0.50);
    }

    /* Remove specular e noise — desnecessários e potencialmente prejudiciais */
    .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 {
      display: none;
    }

    .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;
    }
  }


  /* ═══════════════════════════════════════════════════════════════════════
     ACESSIBILIDADE — prefers-reduced-motion: reduce
     Desativa blur animado, transitions e efeitos dinâmicos.
     O glass permanece visível mas estático.
     ═══════════════════════════════════════════════════════════════════════ */

  /*
    Usuários com epilepsia fotossensível, vestibular disorders ou preferências
    por menos movimento precisam de UI estática. Removemos backdrop-filter
    animado (que pode piscar em Scroll-Driven Animations) e desativamos
    transitions para remover micro-animações.
  */
  @media (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 {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      background: var(--ds-glass-bg-solid);
      transition: none;
    }

    /* Remove hover effects de transform */
    .ds-glass--interactive:hover,
    .ds-glass--interactive:active {
      transform: none;
    }
  }


  /* ═══════════════════════════════════════════════════════════════════════
     PERFORMANCE — data-glass-reduced
     Ativado por performance-guard.ts para slow-2g, saveData ou
     prefers-reduced-motion via JavaScript (mais granular que media query).
     ═══════════════════════════════════════════════════════════════════════ */

  /*
    Os tokens já definem [data-glass-reduced] como override de variáveis.
    Aqui garantimos que transitions são removidas e transforms desativados
    — algo que o sistema de tokens não pode fazer.
  */
  [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 {
    transition: none;
  }

  [data-glass-reduced] .ds-glass--interactive:hover,
  [data-glass-reduced] .ds-glass--interactive:active {
    transform: none;
    box-shadow: var(--ds-depth-1-shadow);
  }

  [data-glass-reduced] .ds-glass--d2.ds-glass--interactive:hover,
  [data-glass-reduced] .ds-glass--d2.ds-glass--interactive:active {
    transform: none;
    box-shadow: var(--ds-depth-2-shadow);
  }


  /* ═══════════════════════════════════════════════════════════════════════
     UTILITÁRIO DE TEXTO — .ds-glass-text
     Legibilidade garantida sobre superfícies translúcidas.
     Aplica text-shadow sutil que funciona sobre qualquer background glass.
     ═══════════════════════════════════════════════════════════════════════ */

  .ds-glass-text {
    text-shadow:
      0 1px 3px oklch(0% 0 0 / 0.15),
      0 0 8px   oklch(0% 0 0 / 0.06);
  }

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


  /* ═══════════════════════════════════════════════════════════════════════
     FOCUS RING — visível sobre superfícies translúcidas
     Duplo anel: branco + primary + glow. Garante WCAG 2.1 AA § 1.4.11
     (Non-Text Contrast) mesmo sobre backgrounds variados.
     ═══════════════════════════════════════════════════════════════════════ */

  .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),
      var(--ds-glass-glow-primary);
  }


  /* ═══════════════════════════════════════════════════════════════════════
     GLASS TILT — [data-glass-tilt]
     Issue: #216 · Complemento de ds-v3/utils/glass-tilt.ts
     O script define --ds-glass-hilight-x/y via JS (requestAnimationFrame);
     este CSS as consome para criar o especular radial dinâmico no ::before.

     Em elementos com .ds-glass + [data-glass-tilt], este ::before
     substitui o specular estático (.ds-glass::before) pelo cursor-following —
     comportamento desejado: o dinâmico é superior ao estático durante o tilt.
     O noise grain (::after do .ds-glass) permanece independente.
     ═══════════════════════════════════════════════════════════════════════ */

  [data-glass-tilt] {
    /* Cria contexto de stacking e contém o ::before dentro do elemento */
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* will-change: gerenciado por glass-tilt.ts (ativado no primeiro mousemove,
       removido após reset) — evita memory pressure em grids com muitos cards. */
  }

  /*
    Especular radial dinâmico — segue o cursor.
    As vars são definidas por glass-tilt.ts via el.style.setProperty().
    Fallback 50%/50% = centro = luz frontal plana (sem JS ativo).
  */
  [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.22) 0%,
      transparent 60%
    );
    /* Suavização ao entrar/sair do elemento (a transição de transform é via JS) */
    transition: background var(--ds-duration-fast, 180ms) var(--ds-ease-sharp, ease-in-out);
  }

  /*
    Light theme: branco puro (oklch 100%) sobre bg claro tem contraste ~1:1 — invisível.
    Usa tint ciano (identidade Aether) que cria contraste perceptível sem parecer pesado.
  */
  [data-theme="light"] [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.18) 0%,
      transparent 60%
    );
  }

  /* Desativa tilt em reduced-motion — ::before removido */
  @media (prefers-reduced-motion: reduce) {
    [data-glass-tilt]::before {
      display: none;
    }
  }

  /* Desativa via data-glass-reduced (ativado por performance-guard.ts) */
  [data-glass-reduced] [data-glass-tilt]::before {
    display: none;
  }

  /*
    ds-card usa Shadow DOM — o especular dinâmico é tratado internamente
    pelo shadow DOM CSS (:host([data-glass-tilt]) .card::before em ds-card.ts).

    overflow: hidden no host cliparia as box-shadows externas do .card (depth system):
    os shadows do depth-1/2/3 se extendem além do border-box do card e seriam cortados.
    overflow: visible restaura a renderização correta das sombras.

    O ::before do host (gerado por [data-glass-tilt]::before acima) permanece presente
    mas é inerte — renderiza atrás do shadow DOM e é coberto pelo background do .card.
  */
  ds-card[data-glass-tilt] {
    overflow: visible;
  }

}