/* =============================================
   Streammer - Temas CSS
   Sistema de temas com propriedades customizadas
   Temas: Escuro (padrao), Claro, Kids
   ============================================= */

/* -----------------------------------------------
   Tema Escuro (padrao) - Inspirado na Netflix
   ----------------------------------------------- */
:root,
[data-theme="dark"] {
  /* Fundos */
  --bg-primary: #0d0d0d;
  --bg-secondary: #141414;
  --bg-card: #1a1a1a;
  --bg-hover: #222222;

  /* Textos */
  --text-primary: #ffffff;
  --text-secondary: #b3b3b3;
  --text-muted: #808080;

  /* Cor principal e estados */
  --color-primary: #e50914;
  --color-primary-hover: #f40612;
  --color-danger: #dc2626;
  --color-success: #16a34a;
  --color-warning: #f59e0b;

  /* Bordas */
  --border-color: #333333;
  --border-radius: 6px;
  --border-radius-lg: 12px;

  /* Sombras */
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);

  /* Dimensoes de layout */
  --sidebar-width: 240px;
  --bottom-nav-height: 60px;
  --header-height: 56px;

  /* Transicoes */
  --transition-fast: 0.15s;
  --transition-normal: 0.3s;

  /* Tipografia */
  --font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-size-sm: 0.75rem;
  --font-size-base: 0.875rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;

  /* Z-index */
  --z-modal: 1000;
  --z-toast: 1100;
  --z-player: 900;
  --z-mini-player: 800;
  --z-dropdown: 700;
}

/* -----------------------------------------------
   Tema Claro
   ----------------------------------------------- */
[data-theme="light"] {
  /* Fundos */
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-card: #fafafa;
  --bg-hover: #eeeeee;

  /* Textos */
  --text-primary: #1a1a1a;
  --text-secondary: #555555;
  --text-muted: #999999;

  /* Cor principal e estados */
  --color-primary: #1a73e8;
  --color-primary-hover: #1557b0;
  --color-danger: #dc2626;
  --color-success: #16a34a;
  --color-warning: #f59e0b;

  /* Bordas */
  --border-color: #e0e0e0;
  --border-radius: 6px;
  --border-radius-lg: 12px;

  /* Sombras */
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* -----------------------------------------------
   Tema Kids - Cores divertidas e amigaveis
   ----------------------------------------------- */
[data-theme="kids"] {
  /* Fundos - Escuro com tom quente */
  --bg-primary: #1a1525;
  --bg-secondary: #201a2e;
  --bg-card: #271f38;
  --bg-hover: #2e2545;

  /* Textos */
  --text-primary: #ffffff;
  --text-secondary: #c4b5d8;
  --text-muted: #8b7aab;

  /* Cor principal e estados */
  --color-primary: #7c3aed;
  --color-primary-hover: #6d28d9;
  --color-danger: #ef4444;
  --color-success: #22c55e;
  --color-warning: #fbbf24;

  /* Bordas - Mais arredondadas */
  --border-color: #3d2e5c;
  --border-radius: 12px;
  --border-radius-lg: 20px;

  /* Sombras */
  --shadow: 0 2px 12px rgba(124, 58, 237, 0.15);
  --shadow-lg: 0 8px 32px rgba(124, 58, 237, 0.25);

  /* Tipografia maior para criancas */
  --font-size-sm: 0.8125rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.75rem;
  --font-size-2xl: 2.25rem;
}

/* -----------------------------------------------
   Transicao suave entre temas
   Aplica-se a todos os elementos ao trocar tema
   ----------------------------------------------- */
*,
*::before,
*::after {
  transition:
    color var(--transition-normal) ease,
    background-color var(--transition-normal) ease,
    border-color var(--transition-normal) ease,
    box-shadow var(--transition-normal) ease;
}

/* Desabilita transicoes de tema em animacoes internas */
.no-theme-transition,
.no-theme-transition *,
.no-theme-transition *::before,
.no-theme-transition *::after {
  transition: none !important;
}