@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --color-background: var(--background);
  --color-foreground: var(--foreground);

  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);

  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);

  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);

  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);

  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);

  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);

  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);

  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);

  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  /* ─────────────────────────────────────────────────────────────────────
   * CORES DE MARCA (sof-*)
   *
   * ACHADO DE AUDITORIA (jul/2026): estes tokens nunca haviam sido
   * registrados aqui. Em Tailwind v4, uma classe como `bg-sof-gold` só
   * vira uma regra CSS real se existir `--color-sof-gold` dentro de um
   * bloco @theme — variáveis soltas em :root (como as logo abaixo, em
   * "BRAND") não são suficientes. Sem este mapeamento, TODAS as classes
   * `bg-sof-*` / `text-sof-*` / `border-sof-*` usadas no app (botão de
   * play, EpisodioCard, Sidebar, Topbar, MainLayout etc.) não geravam
   * NENHUMA cor — os elementos ficavam transparentes. Este bloco é
   * puramente aditivo: não altera nenhum token semântico já existente
   * acima (--color-primary, --color-background etc. continuam iguais).
   * ───────────────────────────────────────────────────────────────────── */
  --color-sof-black: var(--sof-black);
  --color-sof-black-2: var(--sof-black-2);
  --color-sof-black-3: var(--sof-black-3);

  --color-sof-borgonha: var(--sof-borgonha);
  --color-sof-borgonha-dark: var(--sof-borgonha-dark);
  --color-sof-borgonha-light: var(--sof-borgonha-light);

  --color-sof-gold: var(--sof-gold);
  --color-sof-gold-light: var(--sof-gold-light);
  --color-sof-gold-faint: var(--sof-gold-faint);

  --color-sof-text: var(--sof-text);
  --color-sof-text-2: var(--sof-text-2);
  --color-sof-text-3: var(--sof-text-3);

  --color-sof-surface: var(--sof-surface);
  --color-sof-border: var(--sof-border);

  /* Nomes usados nas classes (bg-sof-app, bg-sof-sidebar, bg-sof-topbar)
     não batem literalmente com os nomes das variáveis de origem
     (--sof-app-bg, --sof-sidebar-bg, --sof-topbar-bg) — mapeados aqui
     para o valor correto sem precisar renomear nada no JSX. */
  --color-sof-app: var(--sof-app-bg);
  --color-sof-sidebar: var(--sof-sidebar-bg);
  --color-sof-topbar: var(--sof-topbar-bg);
}

:root {
  /* =====================================================
     BRAND
     ===================================================== */

  --sof-black: #030303;
  --sof-black-2: #050505;
  --sof-black-3: #0b0b0b;

  --sof-borgonha: #2a0110;
  --sof-borgonha-dark: #1a000a;
  --sof-borgonha-light: #4a1a2a;

  --sof-gold: #d4af37;
  --sof-gold-light: #e8c547;
  --sof-gold-faint: rgba(212, 175, 55, 0.1);

  --sof-text: #ffffff;
  --sof-text-2: #e0e0e0;
  --sof-text-3: #a0a0a0;

  --sof-surface: rgba(255, 255, 255, 0.05);
  --sof-border: rgba(255, 255, 255, 0.1);

  /* =====================================================
     APP SHELL (YouTube Music Inspired)
     ===================================================== */

  --sof-app-bg:
    radial-gradient(
      circle at top,
      rgba(80, 0, 30, 0.35) 0%,
      rgba(20, 0, 10, 0.75) 18%,
      #050505 45%,
      #030303 100%
    );

  --sof-surface-1: rgba(255, 255, 255, 0.04);
  --sof-surface-2: rgba(255, 255, 255, 0.06);
  --sof-surface-3: rgba(255, 255, 255, 0.08);

  --sof-divider: rgba(255, 255, 255, 0.08);

  --sof-sidebar-bg: #050505;
  --sof-topbar-bg: rgba(0, 0, 0, 0.55);
  --sof-player-bg: rgba(8, 8, 8, 0.92);

  --radius: 0.65rem;

  /* =====================================================
     SEMANTIC
     ===================================================== */

  --background: var(--sof-borgonha);
  --foreground: var(--sof-text);

  --card: var(--sof-borgonha-light);
  --card-foreground: var(--sof-text);

  --popover: var(--sof-borgonha-light);
  --popover-foreground: var(--sof-text);

  --primary: var(--sof-gold);
  --primary-foreground: var(--sof-borgonha);

  --secondary: var(--sof-borgonha-light);
  --secondary-foreground: var(--sof-text-2);

  --muted: var(--sof-surface);
  --muted-foreground: var(--sof-text-3);

  --accent: var(--sof-gold);
  --accent-foreground: var(--sof-borgonha);

  --destructive: #dc2626;
  --destructive-foreground: #ffffff;

  --border: var(--sof-border);
  --input: var(--sof-surface);
  --ring: var(--sof-gold);

  --chart-1: var(--sof-gold);
  --chart-2: var(--sof-borgonha-light);
  --chart-3: var(--sof-borgonha);
  --chart-4: var(--sof-gold-light);
  --chart-5: var(--sof-gold);

  --sidebar: var(--sof-borgonha);
  --sidebar-foreground: var(--sof-text);
  --sidebar-primary: var(--sof-gold);
  --sidebar-primary-foreground: var(--sof-borgonha);
  --sidebar-accent: var(--sof-gold);
  --sidebar-accent-foreground: var(--sof-borgonha);
  --sidebar-border: var(--sof-border);
  --sidebar-ring: var(--sof-gold);
}

.dark {
  --background: var(--sof-borgonha);
  --foreground: var(--sof-text);

  --card: var(--sof-borgonha-light);
  --card-foreground: var(--sof-text);

  --popover: var(--sof-borgonha-light);
  --popover-foreground: var(--sof-text);

  --primary: var(--sof-gold);
  --primary-foreground: var(--sof-borgonha);

  --secondary: var(--sof-borgonha-light);
  --secondary-foreground: var(--sof-text-2);

  --muted: var(--sof-surface);
  --muted-foreground: var(--sof-text-3);

  --accent: var(--sof-gold);
  --accent-foreground: var(--sof-borgonha);

  --destructive: #dc2626;
  --destructive-foreground: #ffffff;

  --border: var(--sof-border);
  --input: var(--sof-surface);
  --ring: var(--sof-gold);

  --sidebar: var(--sof-borgonha);
  --sidebar-foreground: var(--sof-text);
  --sidebar-primary: var(--sof-gold);
  --sidebar-primary-foreground: var(--sof-borgonha);
  --sidebar-accent: var(--sof-gold);
  --sidebar-accent-foreground: var(--sof-borgonha);
  --sidebar-border: var(--sof-border);
  --sidebar-ring: var(--sof-gold);
}

@layer base {
  * {
    border-color: var(--border);
  }

  html {
    height: 100%;
    /* background-color sólido, além do gradiente: a área de
       overscroll/rubber-band do navegador (bounce no iOS Safari, e
       comportamento equivalente em outros mobile browsers) é pintada
       usando SOMENTE o background-color computado do <html> — ela
       ignora background-image/gradientes. Sem isso, background-color
       fica no valor inicial (transparente) e o navegador mostra branco
       atrás do topo/rodapé durante o bounce. --sof-black é a cor de
       destino do próprio gradiente aos 100%, então a transição é
       imperceptível. */
    background-color: var(--sof-black);
    background-image: var(--sof-app-bg);
    font-family: "Open Sans", sans-serif;
  }

  body {
    background-color: var(--sof-black);
    background-image: var(--sof-app-bg);
    color: var(--foreground);
    min-height: 100%;
    overflow-x: hidden;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "Roboto Slab", serif;
    font-weight: 700;
  }

  .font-display {
    font-family: "Roboto Slab", serif;
  }

  .font-ui {
    font-family: "Montserrat", sans-serif;
  }

  /* =====================================================
     APP SHELL HELPERS
     ===================================================== */

  .bg-sof-app {
    background: var(--sof-app-bg);
  }

  .bg-sof-sidebar {
    background: var(--sof-sidebar-bg);
  }

  .bg-sof-topbar {
    background: var(--sof-topbar-bg);
    backdrop-filter: blur(18px);
  }

  .bg-sof-player {
    background: var(--sof-player-bg);
    backdrop-filter: blur(18px);
  }

  .border-sof-divider {
    border-color: var(--sof-divider);
  }

  .surface-1 {
    background: var(--sof-surface-1);
  }

  .surface-2 {
    background: var(--sof-surface-2);
  }

  .surface-3 {
    background: var(--sof-surface-3);
  }
}

/* =====================================================
   SAFE AREA (iPhone Notch / Home Indicator)
===================================================== */

.pt-safe-top {
  padding-top: max(1rem, env(safe-area-inset-top));
}

.pb-safe {
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
}

.bottom-bottomnav {
  bottom: calc(3.5rem + env(safe-area-inset-bottom));
}

.h-safe-bottom {
  height: env(safe-area-inset-bottom);
}

/* Equalizer animado — indica qual faixa está tocando (FaixaRow.tsx, Música) */
.eq-bar {
  width: 3px;
  background: currentColor;
  border-radius: 1px;
  animation: eq-bounce 0.9s ease-in-out infinite;
  transform-origin: bottom;
}
.eq-bar:nth-child(1) {
  height: 40%;
  animation-delay: 0s;
}
.eq-bar:nth-child(2) {
  height: 100%;
  animation-delay: 0.2s;
}
.eq-bar:nth-child(3) {
  height: 60%;
  animation-delay: 0.4s;
}
@keyframes eq-bounce {
  0%,
  100% {
    transform: scaleY(0.4);
  }
  50% {
    transform: scaleY(1);
  }
}

/* Usada pelo QueueDrawer.tsx no item ativo da fila (já existia referenciada
   no componente, mas nunca tinha sido definida). */
@keyframes equalizer {
  0% {
    transform: scaleY(0.3);
  }
  100% {
    transform: scaleY(1);
  }
}