/* PedeBis: tokens do design system v2 (Brand Book Direção 03, nov/2026).
   Regra de ouro: estrutura fixa, tema por tokens. Cor, fonte, raio e sombra
   vivem aqui; nenhuma folha de estilo escreve cor literal.
   Paleta da marca: Purple #3920A3 (marca e expressão), Acid #E3FF64 (ação e
   destaque), Pink #FF5C93 (emoção, selo Ao vivo), Night #110F21 e Cream
   #F8F5ED (respiro e leitura). Tipografia: Lato (Black nos títulos, Regular
   no corpo). Os nomes antigos (--destaque, --card, --texto...) continuam
   existindo como apelidos, para nada quebrar. */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');

:root {
  /* marca */
  --purple:     #3920A3;
  --acid:       #E3FF64;
  --pink:       #FF5C93;
  --night:      #110F21;
  --cream:      #F8F5ED;

  /* superfícies: Night com camadas de roxo, profundidade por tom */
  --bg:        #110F21;
  --surface-1: #1A1733;
  --surface-2: #221E43;
  --surface-3: #2B2654;
  --line:      #342F63;

  /* texto */
  --fg:        #F8F5ED;
  --fg-muted:  #B6B2CF;

  /* ação e estado: cada cor tem UM significado */
  --accent:     #E3FF64;   /* ação: botão primário, aba ativa, chip ativo (Acid) */
  --accent-rgb: 227, 255, 100;
  --on-accent:  #110F21;   /* texto sobre --accent */
  --live:       #5FE0A3;   /* pago, tocada, confirmado (estado de sucesso) */
  --live-rgb:   95, 224, 163;
  --vivo:       #FF5C93;   /* selo Ao vivo e destaques de emoção (Pink) */
  --vivo-rgb:   255, 92, 147;
  --danger:     #FF6B61;   /* recusada, erro, devolver */
  --danger-rgb: 255, 107, 97;
  --warning:    #E3FF64;   /* pendência: a mesma cor de ação, com texto */

  /* marca: o roxo fica no logo, no cartaz e nas campanhas, nunca em botão */
  --marca:      #3920A3;
  --marca-rgb:  57, 32, 163;

  /* contexto do show: vem da banda, nunca em botão */
  --band:       #3920A3;
  --band-deep:  #110F21;

  /* forma */
  --radius-control: 999px;
  --radius-card:    16px;
  --radius-thumb:   10px;
  --radius-input:   12px;

  /* movimento */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;

  /* tipografia */
  --font-display: 'Lato', system-ui, -apple-system, sans-serif;
  --font-body:    'Lato', system-ui, -apple-system, sans-serif;

  /* ---- apelidos do CSS antigo (nada muda de lugar) ---- */
  --card:       var(--surface-1);
  --card-2:     var(--surface-2);
  --texto:      var(--fg);
  --texto-2:    var(--fg-muted);
  --destaque:   var(--accent);
  --destaque-2: var(--danger);
  --ok:         var(--live);
  --borda:      var(--line);
  --borda-forte: #443E78;
  --perigo:     var(--danger);
}

/* Modo Ao vivo: a cor da banda entra, o resto fica igual. O JS liga
   data-mode="live" no <html> e define --band/--band-deep pelo preset. */
html[data-mode="live"] {
  --band-top: radial-gradient(120% 70% at 50% 0%, var(--band) 0%, var(--band-deep) 55%, var(--bg) 100%);
}

/* Presets de cor da banda (02 §5.2): todos passam com --fg >= 4,5 na parte
   clara e >= 10 na deep. O painel grava o nome; o CSS resolve a cor.
   "roxo" e "vinho" (padrão) agora são o Purple da marca. */
html[data-banda="vinho"]    { --band: #3920A3; --band-deep: #110F21; }
html[data-banda="azul"]     { --band: #1d5fa8; --band-deep: #0b1f38; }
html[data-banda="garrafa"]  { --band: #0f7a5a; --band-deep: #06281e; }
html[data-banda="roxo"]     { --band: #3920A3; --band-deep: #110F21; }
html[data-banda="cobre"]    { --band: #b8641a; --band-deep: #3b2009; }
html[data-banda="magenta"]  { --band: #a3246b; --band-deep: #2d0a1e; }
html[data-banda="petroleo"] { --band: #2c6b8a; --band-deep: #0e222c; }
html[data-banda="oliva"]    { --band: #5a5a2e; --band-deep: #1d1d0f; }

/* Lettering da marca (SVG do kit): o cabeçalho usa só o lettering; o
   monograma fica para favicon, atalhos e avatar. */
.marca { display: inline-block; height: 22px; width: auto; vertical-align: middle; }
.marca-grande { height: 32px; }
/* Monograma animado no canto superior: o "p" vira batimento e volta
   (brand/monograma-animado.svg). Entra antes do lettering em todo a.logo. */
a.logo { display: inline-flex; align-items: center; gap: 7px; }
a.logo::before { content: ''; flex: none; width: 26px; height: 28px; background: url('/brand/monograma-animado.svg') center / contain no-repeat; }