/* ==========================================================================
   DS v3 — Dark Glass System (components/ds-dark-glass.css)
   Issue: #225 · Parent: #192 (FASE-4)
   ==========================================================================

   Implementa coerência de dark glass em todos os componentes Web do sistema
   que expõem CSS Parts. Complementa os overrides automáticos de tokens/glass.css
   com tratamento específico por componente.

   COMPONENTES COBERTOS:
   1. ds-card  → ::part(card) — refinamentos dark glass (glow/interactive/solid)
   2. ds-toast → ::part(toast) — upgrade de DS v2 sólido para depth-4 glass
   3. ds-tabs  → ::part(tab-list), ::part(tab) — superfície de navegação dark glass

   REFERÊNCIA DE MATERIALIDADE:
   ds-sidebar.css é o padrão de dark glass do sistema:
   - Base: --ds-glass-dark-500 (oklch 10% / 90% opacidade)
   - Blur: blur(32px) saturate(120%) brightness(0.88)
   - Borda: inset + glow lateral + sombra profunda
   - Emissão: linha cyan 2px no topo, glow lateral 2px 0 24px/0.14

   LUMINESCÊNCIA CYAN:
   Controlada via --ds-glass-glow-primary (override em tokens/glass.css):
   - Light: 0 0 20px oklch(62% 0.22 210 / 0.25)
   - Dark:  0 0 20px oklch(62% 0.22 210 / 0.30)  ← reforçado (dark amplifica)

   ESPECULAR:
   O ds-card.ts usa var(--ds-glass-border-hilight) no ::before:
   - Light: oklch(100% 0 0 / 0.50)  → reflexo forte
   - Dark:  oklch(100% 0 0 / 0.12)  → reflexo discreto (adaptação automática)

   DEPENDÊNCIAS:
   - tokens/glass.css: --ds-glass-glow-primary/lg, --ds-glass-dark-*, --ds-glass-border-*
   - tokens/depth.css: --ds-depth-4-*, --ds-depth-1-*
   - tokens/easing.css: --ds-ease-spring-2, --ds-duration-*
   - tokens/color.css: --ds-primary (cyan-500)

   COMPATIBILIDADE:
   - CSS Part API: Chrome 73+, Edge 79+, Safari 13.1+, Firefox 72+
   - backdrop-filter: Chrome 76+, Safari 9+, Firefox 103+
   - Fallbacks: @supports + prefers-reduced-motion + data-glass-reduced + prefers-contrast
   ========================================================================== */

@layer ds-v3-components {

  /* ══════════════════════════════════════════════════════════════════════════
     DS-CARD — Refinamentos Dark Glass
     ══════════════════════════════════════════════════════════════════════════

     O ds-card.ts já consome tokens --ds-glass-bg-* e --ds-depth-1-* que se
     adaptam automaticamente ao dark via glass.css. Os overrides aqui tratam:

     1. Variante "glow" — o glow agora usa --ds-glass-glow-primary dark (0.30)
        que é aplicado via ::part() para garantir precedência sobre shadow DOM.
     2. Cards interactive + glass/glow — hover state com luminescência cyan.
     3. Variante "solid" — DS v2 usa #fff; dark precisa de surface escura.

     NOTA SOBRE SELETORES:
     `ds-card[variant="glow"]::part(card)` funciona porque `variant` é um
     atributo no HOST element (o custom element), não no shadow DOM interno.
     O `::part()` requer que o part seja exposto via `part="card"` no shadow DOM.
  ══════════════════════════════════════════════════════════════════════════ */

  /* ─── Variante "glow" em dark: border accent + glow cyan reforçado ─── */
  /*
    O shadow DOM interno define box-shadow combinando --ds-depth-1-shadow e
    --ds-glass-glow-primary. No dark, --ds-glass-glow-primary já foi reforçado
    (0.25 → 0.30) em tokens/glass.css. Este seletor garante que o ::part()
    (precedência CSS externa > shadow DOM interno) aplica o glow token correto.
  */
  [data-theme="dark"] ds-card[variant="glow"]::part(card),
  :root[data-theme-effective="dark"] ds-card[variant="glow"]::part(card) {
    border-color: var(--ds-glass-border-accent);   /* cyan oklch(62% 0.22 210 / 0.45) */
    box-shadow:
      var(--ds-depth-1-shadow),
      var(--ds-glass-glow-primary);   /* dark override: 0.30 de opacidade */
  }


  /* ─── Cards interactive + glass em dark: hover com luminescência cyan ─── */
  /*
    No dark, o hover translateY(-3px) ocorre via shadow DOM interno.
    Este ::part() aplica o glow cyan no box-shadow do hover — completando
    a sensação de "lift + emissão" que é o padrão do DS v3 para interações.

    LIMITAÇÃO: `:hover` em `::part()` funciona em Chrome 73+, Firefox 80+,
    Safari 13.1+. Browsers mais antigos verão o translateY mas sem o glow extra.
  */
  [data-theme="dark"] ds-card[interactive][variant="glass"]::part(card):hover,
  [data-theme="dark"] ds-card[interactive][variant="glow"]::part(card):hover,
  :root[data-theme-effective="dark"] ds-card[interactive][variant="glass"]::part(card):hover,
  :root[data-theme-effective="dark"] ds-card[interactive][variant="glow"]::part(card):hover {
    box-shadow:
      var(--ds-depth-2-shadow),
      var(--ds-glass-glow-primary);
  }


  /* ─── Variante "solid" em dark: surface dark ao invés de branco (#fff) ─── */
  /*
    ds-card[variant="solid"] usa internamente:
      background: var(--ds-surface-elevated, #fff)
      border: 1px solid var(--ds-border-color, #dee2e6)
    Ambos são tokens DS v2 sem override dark nativo.
    Override via ::part() aplica a surface escura correta do DS v3.
  */
  [data-theme="dark"] ds-card[variant="solid"]::part(card),
  :root[data-theme-effective="dark"] ds-card[variant="solid"]::part(card) {
    background: var(--ds-glass-dark-solid);   /* oklch(12% 0.018 230 / 1.00) */
    border-color: var(--ds-glass-border-dark); /* oklch(100% 0 0 / 0.09) */
  }


  /* ══════════════════════════════════════════════════════════════════════════
     DS-TOAST — Upgrade para Depth-4 Glass
     ══════════════════════════════════════════════════════════════════════════

     CONTEXTO DO DS v2:
     O ds-toast.ts usa:
       background: var(--ds-bg-primary)         → sólido (#fff / dark variant)
       border-left: 4px solid var(--ds-primary) → indicador de tipo
       box-shadow: var(--ds-shadow-lg)           → sombra simples

     DS v3 DEPTH-4:
     Toasts são superfícies Críticas — máxima atenção do usuário.
     Depth-4 = blur máximo (48px) + opacidade 93% + sombra dramática + anel accent.

     O border-left semântico é PRESERVADO como discriminador visual de tipo,
     mas integrado ao sistema de bordas glass (3px, não 4px do v2).

     SOBRE ANIMAÇÕES:
     O ds-toast.ts aplica `animation: toast-slide-in` no :host (não no .toast).
     O ::part(toast) aplica material glass; o :host continua com o slide.
     Ambas as animações coexistem sem conflito (diferentes propriedades).

     SELETOR DE TIPO:
     `ds-toast[type="success"]::part(toast)` funciona porque `type` é um
     atributo do HOST element (exposto via observedAttributes no WC).
  ══════════════════════════════════════════════════════════════════════════ */

  /* ─── Material Depth-4 (base para todos os tipos) ─── */
  ds-toast::part(toast) {
    background:              var(--ds-depth-4-bg);
    backdrop-filter:         var(--ds-depth-4-blur);
    -webkit-backdrop-filter: var(--ds-depth-4-blur);

    /*
      --ds-depth-4-border = 1px solid var(--ds-glass-border-accent)
      Sobrescrevemos o border-left do DS v2 (4px sólido) com a borda glass accent.
      O border-left semântico de tipo é aplicado pelos seletores abaixo,
      sobrescrevendo apenas border-left (os outros lados ficam com o glass border).
    */
    border:        var(--ds-depth-4-border);
    border-radius: var(--ds-depth-4-radius);
    box-shadow:    var(--ds-depth-4-shadow);

    /* Border-left padrão (fallback para toasts sem atributo type) */
    border-left: 3px solid var(--ds-primary);
  }

  /* ─── Tipo: info (default) ─── */
  ds-toast[type="info"]::part(toast) {
    border-left: 3px solid var(--ds-primary);   /* cyan — identidade Aether */
  }

  /* ─── Tipo: sucesso ─── */
  ds-toast[type="success"]::part(toast) {
    /*
      verde OKLCH — análogo perceptual a oklch(65% 0.20 142).
      Não usa --ds-success para evitar dependência de token v2 indefinido no dark.
    */
    border-left: 3px solid oklch(65% 0.20 142);
  }

  /* ─── Tipo: erro ─── */
  ds-toast[type="error"]::part(toast) {
    border-left: 3px solid oklch(58% 0.22 29);  /* vermelho-laranja OKLCH */
  }

  /* ─── Tipo: aviso ─── */
  ds-toast[type="warning"]::part(toast) {
    border-left: 3px solid oklch(78% 0.18 85);  /* âmbar OKLCH */
  }

  /* ─── Focus ring no close button ─── */
  ds-toast::part(close-btn):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);
  }

  /* ─── Fallback: sem backdrop-filter ─── */
  /*
    Distingue light de dark: sem backdrop-filter o background precisa ser opaco,
    mas a cor base é diferente por tema para garantir contraste WCAG AA.
    Light: fundo claro (--ds-glass-bg-solid) + sombra moderada.
    Dark:  fundo escuro (--ds-glass-dark-solid) + sombra dramática + anel accent.
    Sem este split, o dark-solid (#0a0b0f) aplicado em light mode com texto
    escuro (#212529) resulta em contraste ~1.2:1 — falha WCAG AA grave.
  */
  @supports not (backdrop-filter: blur(1px)) {
    ds-toast::part(toast) {
      background: var(--ds-glass-bg-solid);   /* light: claro opaco */
      box-shadow:
        0 8px 32px oklch(0% 0 0 / 0.25),
        0 0 0 1px  var(--ds-glass-border-default);
    }

    [data-theme="dark"] ds-toast::part(toast),
    :root[data-theme-effective="dark"] ds-toast::part(toast) {
      background: var(--ds-glass-dark-solid); /* dark: escuro opaco */
      box-shadow:
        0 8px 32px oklch(0% 0 0 / 0.50),
        0 0 0 1px  var(--ds-glass-border-accent);
    }
  }

  /* ─── Reduced motion ─── */
  /*
    Mantém o material glass mas remove backdrop-filter (pode piscar).
    O slide animation do :host já é cancelado por easing.css (1ms).
  */
  @media (prefers-reduced-motion: reduce) {
    ds-toast::part(toast) {
      backdrop-filter:         none;
      -webkit-backdrop-filter: none;
      background: var(--ds-glass-bg-solid);
    }
  }

  /* ─── Performance: data-glass-reduced ─── */
  /*
    var(--ds-glass-bg-solid) adapta-se automaticamente ao tema: no dark,
    tokens/glass.css redireciona --ds-glass-bg-solid → --ds-glass-dark-solid.
    Não é necessário override separado por tema aqui.
  */
  [data-glass-reduced] ds-toast::part(toast) {
    backdrop-filter:         none;
    -webkit-backdrop-filter: none;
    background: var(--ds-glass-bg-solid);   /* auto: light claro / dark escuro via redirect */
  }

  /* ─── Alto contraste ─── */
  @media (prefers-contrast: more) {
    ds-toast::part(toast) {
      backdrop-filter:         none;
      -webkit-backdrop-filter: none;
      background: var(--ds-glass-bg-solid);
      border: 2px solid oklch(0% 0 0 / 0.65);
      border-left-width: 4px;   /* mantém indicador de tipo visível */
    }

    /* Dark: borda clara sobre fundo escuro */
    [data-theme="dark"] ds-toast::part(toast),
    :root[data-theme-effective="dark"] ds-toast::part(toast) {
      background: var(--ds-glass-dark-solid);
      border-color: oklch(100% 0 0 / 0.50);
    }
  }


  /* ══════════════════════════════════════════════════════════════════════════
     DS-TABS — Dark Glass Navigation Surface
     ══════════════════════════════════════════════════════════════════════════

     CONTEXTO DO DS v2:
     O ds-tabs.ts usa:
       .tab-list { border-bottom: 1px solid var(--ds-border-default, #dee2e6) }
       .tab:hover { background: var(--ds-surface-sunken, #f8f9fa) }
       .tab.active { border-bottom-color: var(--ds-primary) }

     DS v3 DEPTH-1:
     Tab-list é uma superfície de navegação ancorada (depth-1).
     Aplica blur moderado (16px) + background glass.

     O border-bottom interno é substituído por box-shadow inset para manter
     a linha separadora como glass border (opacidade adaptativa ao tema).

     NOTA SOBRE TAB ATIVA:
     A classe `.active` interna do shadow DOM não é selecionável via ::part().
     O token --ds-primary (cyan) já se aplica via herança automática — a tab
     ativa usa `border-bottom-color: var(--ds-primary, #00D4FF)` internamente
     que herda o cyan correto do dark theme sem override adicional.
  ══════════════════════════════════════════════════════════════════════════ */

  ds-tabs::part(tab-list) {
    background:              var(--ds-depth-1-bg);
    backdrop-filter:         var(--ds-depth-1-blur);
    -webkit-backdrop-filter: var(--ds-depth-1-blur);

    /*
      Remove border-bottom interno (#dee2e6 hardcoded no shadow DOM).
      Substitui por box-shadow inset que usa --ds-glass-border-default:
      - Light: oklch(100% 0 0 / 0.18)
      - Dark:  oklch(100% 0 0 / 0.09)  ← adapta automaticamente
    */
    border-bottom: none;
    box-shadow:
      var(--ds-depth-1-shadow),
      inset 0 -1px 0 var(--ds-glass-border-default);

    /* Raio no topo: a tab-list é a "tampa" do painel */
    border-radius: var(--ds-depth-1-radius) var(--ds-depth-1-radius) 0 0;
    padding: 0 var(--ds-space-1, 0.25rem);
  }

  /* ─── Tab: hover glass sutil ─── */
  /*
    O shadow DOM interno usa `background: var(--ds-surface-sunken, #f8f9fa)` no hover
    — inadequado no dark. Override com fundo glass semi-transparente.
  */
  ds-tabs::part(tab):hover {
    background: oklch(100% 0 0 / 0.06);          /* glass hover neutro */
    border-radius: var(--ds-radius-sm, 0.25rem); /* raio interno para o botão */
  }

  /* ─── Fallback: sem backdrop-filter ─── */
  @supports not (backdrop-filter: blur(1px)) {
    ds-tabs::part(tab-list) {
      background: var(--ds-glass-bg-solid);
    }
  }

  /* ─── Reduced motion ─── */
  @media (prefers-reduced-motion: reduce) {
    ds-tabs::part(tab-list) {
      backdrop-filter:         none;
      -webkit-backdrop-filter: none;
      background: var(--ds-glass-bg-solid);
    }
  }

  /* ─── Performance: data-glass-reduced ─── */
  [data-glass-reduced] ds-tabs::part(tab-list) {
    backdrop-filter:         none;
    -webkit-backdrop-filter: none;
    background: var(--ds-glass-bg-solid);
  }

  /* ─── Alto contraste ─── */
  @media (prefers-contrast: more) {
    ds-tabs::part(tab-list) {
      backdrop-filter:         none;
      -webkit-backdrop-filter: none;
      background: var(--ds-glass-bg-solid);
      border-bottom: 2px solid oklch(0% 0 0 / 0.35);
      box-shadow: none;
    }

    [data-theme="dark"] ds-tabs::part(tab-list),
    :root[data-theme-effective="dark"] ds-tabs::part(tab-list) {
      background: var(--ds-glass-dark-solid);
      border-bottom-color: oklch(100% 0 0 / 0.35);
    }

    ds-tabs::part(tab):hover {
      background: oklch(0% 0 0 / 0.08);
    }
  }

} /* @layer ds-v3-components */