/* ==================================================================
   DS 5.1 — Dark mode com profundidade real (5 níveis)

   No dark mode cada camada sobe com um brilho sutil. As sombras
   ganham cor do accent (sombra "colorida") em vez de preto puro.
   Cria a sensação de profundidade em Z numa interface escura.
   ================================================================== */

/* Tokens de profundidade — só ativam em temas escuros */
:root[data-theme="dark"], :root[data-theme="neon"] {
  /* 5 camadas de superfície: do mais profundo ao mais elevado */
  --depth-0: var(--bg);                                               /* fundo da página */
  --depth-1: color-mix(in srgb, var(--bg) 92%, #FFF);                /* cards de conteúdo */
  --depth-2: color-mix(in srgb, var(--bg) 84%, #FFF);                /* painéis, gavetas */
  --depth-3: color-mix(in srgb, var(--bg) 76%, #FFF);                /* overlays, popovers */
  --depth-4: color-mix(in srgb, var(--bg) 68%, #FFF);                /* tooltips, menus flutuantes */

  /* Sombras coloridas com cor do accent */
  --shadow-colored-sm: 0 2px 8px color-mix(in srgb, var(--accent) 18%, rgba(0,0,0,.4));
  --shadow-colored: 0 4px 16px color-mix(in srgb, var(--accent) 14%, rgba(0,0,0,.5)),
                    0 1px 3px rgba(0,0,0,.3);
  --shadow-colored-lg: 0 8px 32px color-mix(in srgb, var(--accent) 12%, rgba(0,0,0,.6)),
                       0 2px 6px rgba(0,0,0,.3);
  --shadow-colored-xl: 0 16px 56px color-mix(in srgb, var(--accent) 10%, rgba(0,0,0,.7)),
                       0 4px 12px rgba(0,0,0,.3);

  /* Borda interna luminosa (simula luz vindo de cima) */
  --depth-highlight: inset 0 1px 0 rgba(255, 255, 255, .04);
  --depth-highlight-strong: inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* Classes de profundidade */
.depth-1 { background: var(--depth-1, var(--surface)); box-shadow: var(--shadow-colored-sm, none), var(--depth-highlight, none); }
.depth-2 { background: var(--depth-2, var(--surface-2)); box-shadow: var(--shadow-colored, none), var(--depth-highlight, none); }
.depth-3 { background: var(--depth-3, var(--surface-3, var(--surface-2))); box-shadow: var(--shadow-colored-lg, none), var(--depth-highlight-strong, none); }
.depth-4 { background: var(--depth-4, var(--surface-3, var(--surface-2))); box-shadow: var(--shadow-colored-xl, none), var(--depth-highlight-strong, none); }

/* Aplicação automática em componentes existentes (dark mode) */
:root[data-theme="dark"] .card-poster,
:root[data-theme="neon"] .card-poster {
  box-shadow: var(--shadow-colored-sm);
}
:root[data-theme="dark"] .card-poster:hover,
:root[data-theme="neon"] .card-poster:hover {
  box-shadow: var(--shadow-colored);
}
:root[data-theme="dark"] .modal,
:root[data-theme="neon"] .modal {
  background: var(--depth-3, var(--surface));
  box-shadow: var(--shadow-colored-xl), var(--depth-highlight-strong);
}
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="neon"] .dropdown-menu {
  background: var(--depth-4, var(--surface));
  box-shadow: var(--shadow-colored-lg), var(--depth-highlight);
}
:root[data-theme="dark"] .tooltip,
:root[data-theme="neon"] .tooltip {
  background: var(--depth-4, var(--surface));
  box-shadow: var(--shadow-colored);
}
:root[data-theme="dark"] .bottom-sheet,
:root[data-theme="neon"] .bottom-sheet {
  background: var(--depth-2, var(--surface));
  box-shadow: var(--shadow-colored-xl), var(--depth-highlight-strong);
}

/* Cards e painéis no admin */
:root[data-theme="dark"] .adm-card,
:root[data-theme="neon"] .adm-card {
  background: var(--depth-1, var(--surface));
  box-shadow: var(--shadow-colored-sm), var(--depth-highlight);
}