/* =========================================================================
   sistema.css — o sistema de design do Karaoke StarSinger em variáveis.

   Este arquivo NÃO estiliza nada. Ele só declara os valores (cor, espaço,
   raio, sombra, tipografia, layout) e, no fim de cada bloco de tema, LIGA
   esses valores nos nomes de variável que o produto JÁ usa hoje
   (--bg, --fg, --cx, --accent, --line, --hair, --btn-a…). É essa ponte que
   faz o visual novo entrar sem renomear uma classe sequer.

   Ordem de inclusão: DEPOIS de web/base.css e depois do <style> interno de
   cada página. Antes de web/tema-novo.css.

   ---- dois detalhes de cascata que não são acidente ----

   1) TEMA. O app grava o tema em <html tema="claro|escuro"> e o site em
      <html data-tema="claro|escuro">. Os dois scripts resolvem "automatico"
      pra um dos dois valores ANTES da primeira pintura, então não existe
      terceiro estado pra tratar aqui — só claro e escuro.

   2) SKINS. O app deixa a pessoa trocar as cores em Configurações › Cores
      do app (data-skin=mar|mata|fogo|uva|carvao) e sempre grava um valor,
      com 'rosa' de padrão. Se este arquivo declarasse --accent num
      `:root[tema=claro]` puro (0,2,0) ele passaria por cima de
      `:root[data-skin=mar]` (0,2,0) só por vir depois — e escolher "Mar"
      no tema claro deixaria de funcionar. Por isso TODA cor de marca mora
      em seletores que casam apenas com "sem skin" (o site) ou com o skin
      padrão 'rosa' (o app). Skin escolhido pelo usuário continua ganhando.
      Tudo que não é cor de marca fica em `:root` normal, onde não disputa
      com skin nenhum.
   ========================================================================= */

:root{
  /* ---------------------------------------------------------------
     RAMPA VIOLETA — o eixo da referência (#7C5CFF … #A78BFA).
     Números medidos, não escolhidos no olho: ver o bloco de contraste
     no fim deste arquivo.
     --------------------------------------------------------------- */
  --v50:#f4f1ff;  --v100:#e9e3ff; --v200:#d6ccff; --v300:#bba8ff;
  --v400:#a78bfa; --v500:#7c5cff; --v600:#6b46e5; --v700:#5b34ce;
  --v800:#4a2ba3; --v900:#2e1a66;

  /* neutros. ERAM "puxados pro violeta" e o resultado foi o app inteiro com
     cara de roxo — a queixa "o modo escuro fica muito roxo". O fundo dava
     rgb(15,16,36): 21 pontos de azul a mais que de vermelho, num tom que
     deveria ser quase preto.
     Os escuros perderam metade dessa inclinação (o azul cai de +21 pra +9) e
     a LUMINÂNCIA fica igual — o contraste medido não muda, só o tom para de
     puxar pro violeta. A cor da marca continua nos --v*, onde ela pertence. */
  --n0:#ffffff;   --n25:#f8f8fb; --n50:#f1f1f6; --n100:#e5e4ec;
  --n300:#a3a1b8; --n500:#56566e; --n600:#3f3f56; --n700:#33334a;
  --n800:#232330; --n850:#1c1c26; --n900:#15151f; --n950:#101018;

  /* apoio (sucesso / atenção / erro) — só o necessário, sem paleta paralela */
  --ok-claro:#0a7d55;   --ok-escuro:#2ce8a0;
  --at-claro:#8a5000;   --at-escuro:#ffc06b;
  --er-claro:#a3123f;   --er-escuro:#ff9db5;

  /* ---------------------------------------------------------------
     ESPAÇO — escala de 4px. Um número por degrau, sem meio-termo.
     --------------------------------------------------------------- */
  /* ---------------------------------------------------------------
     CURVAS DE MOVIMENTO. Moravam so no `movimento.css`, que o SITE
     carrega e o APP nao — por isso o player tinha os mesmos valores
     digitados na mao em oito lugares. Afinar a curva la nao mexia no
     jogo. Aqui, no arquivo que os dois carregam, existe uma fonte so.
     Nomes mantidos: quem ja usa `var(--mola)` continua valendo.
     --------------------------------------------------------------- */
  --mola:cubic-bezier(.16,1,.3,1);   /* easeOutQuint — assenta, sem passar do ponto */
  --vivo:cubic-bezier(.22,1,.36,1);  /* ease-out limpo, pra entrada e resposta */

  --e0:0;    --e1:4px;  --e2:8px;  --e3:12px; --e4:16px;
  --e5:20px; --e6:24px; --e7:32px; --e8:40px; --e9:56px; --e10:80px;

  /* ---------------------------------------------------------------
     RAIO — a referência trabalha em ~16px no cartão e pílula no que é
     controle. Escala curta de propósito: raio demais vira ruído.
     --------------------------------------------------------------- */
  --r1:8px; --r2:10px; --r3:12px; --r4:16px; --r5:20px; --rp:999px;

  /* ---------------------------------------------------------------
     TIPOGRAFIA
     --------------------------------------------------------------- */
  --fonte:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --t-xs:11.5px; --t-sm:12.5px; --t-md:13.5px; --t-base:15px;
  --t-lg:17px;   --t-xl:20px;   --t-2xl:24px;
  /* títulos: clamp pra a mesma regra servir de iPhone SE a TV 4K */
  --t-h1:clamp(32px,6vw,58px);
  --t-h2:clamp(22px,3.2vw,32px);
  --t-h3:clamp(18px,2.2vw,22px);

  --p-normal:400; --p-medio:500; --p-forte:600; --p-negrito:700; --p-preto:800;
  --tr-titulo:-.03em;   /* tracking negativo só em título grande */
  --tr-rotulo:.09em;    /* rótulo maiúsculo pequeno */
  --lh-apertada:1.15; --lh-normal:1.5; --lh-larga:1.6;

  /* ---------------------------------------------------------------
     LAYOUT — os números que a responsividade usa em mais de um lugar.
     --------------------------------------------------------------- */
  --lateral:264px;        /* largura da barra lateral no desktop */
  --lateral-min:1080px;   /* abaixo disto a lateral vira barra de topo */
  --toque:44px;           /* alvo mínimo no dedo */
  --linha-max:1440px;     /* teto de leitura do conteúdo */
  --transicao:.18s cubic-bezier(.2,.6,.3,1);
}

/* =========================================================================
   TEMA ESCURO (padrão do produto e do palco)
   Fundo azul-escuro da referência: #0F1024.

   Os três seletores não são enfeite. O player declara o escuro em
   `:root, :root[tema=escuro]` — numa LISTA, quem manda é a especificidade
   do seletor que casou, então em <html tema="escuro"> vale 0,2,0. Um
   `:root` puro aqui (0,1,0) perdia, e o tema escuro continuava com o
   fundo #07070c antigo enquanto o claro já era o novo. Medido na bancada,
   não deduzido.
   ========================================================================= */
/* `#tela` e' o PALCO da tela de cantar: escuro nos DOIS temas. Ele entra na
   lista pra receber esta palette mesmo com o app no claro — senao canvas,
   letra e HUD herdavam a do claro (prova_palco_escuro.mjs). */
:root,
:root[tema=escuro],
:root[data-tema=escuro],
#tela{
  --bg:var(--n950);
  --bg2:var(--n900);
  --cx:var(--n850);          /* superfície de cartão/painel */
  --cx2:#ffffff0f;           /* realce sutil: campo, chip, trilho */
  --cx3:#ffffff17;           /* realce um degrau acima (hover) */
  --fg:#f2f1fa;
  --forte:#d6d4ea;
  --dim:#9c9ac0;             /* 6,14:1 sobre --cx — medido */
  --line:#ffffff1f;
  --borda:#ffffff2e;
  --hair:#ffffff14;

  --good:var(--ok-escuro);
  --atencao:var(--at-escuro);
  /* AVISO: eram OITO laranjas pro mesmo papel (#ffb648 #ffc247
     #ffd666 #ffb454 #ffc06b #ffc46b #c98a00 #8a5000), escolhidos
     um a um conforme o fundo de cada tela. Um par por tema, e o
     fundo de cada caixa e' quem decide qual resolve. */
  --aviso-fg:#ffc247;      /* 9,7:1 sobre --cx escuro */
  --aviso-fundo:#ffc24714; --aviso-borda:#ffc24740;
  --erro-bg:#e0567b14; --erro-border:#e0567b40; --erro-fg:var(--er-escuro);
  --ok-bg:#2ce8a014;   --ok-border:#2ce8a040;

  /* sombras: no escuro sombra some, então o que separa camada é a
     superfície mais clara + um fio de luz no topo */
  --s1:0 1px 2px #00000059;
  --s2:0 2px 6px #0000005e,0 10px 28px #00000073;
  --s3:0 24px 60px #000000a6;
  --luz-topo:inset 0 1px 0 #ffffff1f;
  --sombra-cartao:var(--s2);
  --sombra:var(--s3);
  --sombra-capa:0 8px 26px #00000099;

  /* superfícies com nome próprio no site de vendas */
  --panel:var(--n900);
  --silhueta:#07071a;
  --fio:#ffffff26;
  --input-bg:#ffffff0d;
  --btn-sec-bg:#ffffff12;
  --navbg:#0f1024e6;
  --barra-trilho:#ffffff12;
  --marcador-off:#ffffff26;
  --chip-hair:#ffffff12;
  --n-contorno:#ffffff45;

  /* palco do jogo */
  --palco-ceu:#0b0b1c; --palco-silhueta:#0a0818; --palco-halo:167,139,250;
  --palco-borda:rgba(167,139,250,.32);
  --letra-espera:#9a99b6;
}

/* =========================================================================
   TEMA CLARO — violeta sobre branco.
   Não é o escuro invertido: cada cor de texto foi medida sobre o branco do
   cartão (#fff) E sobre o fundo da página (#f7f6fb), e as duas passam.
   ========================================================================= */
:root[tema=claro],
:root[data-tema=claro]{
  --bg:var(--n25);
  --bg2:var(--n50);
  --cx:var(--n0);
  /* 3% de preto era quase nada: campo, chip e cartão sumiam no fundo claro e
     a tela parecia "apagada". 7% ainda é discreto e já se enxerga. */
  --cx2:#00000012;
  --cx3:#0000001f;
  --fg:#16162b;
  --forte:var(--n700);
  --dim:var(--n500);         /* 7,11:1 sobre branco — medido */
  --line:#0000001c;
  --borda:#00000026;
  --hair:#00000012;

  --good:var(--ok-claro);
  --atencao:var(--at-claro);
  --aviso-fg:#8a5000;      /* 5,9:1 sobre branco */
  --aviso-fundo:#8a50000f; --aviso-borda:#8a500033;
  --erro-bg:#ffe3e9; --erro-border:#e0567b66; --erro-fg:var(--er-claro);
  --ok-bg:#dcf6ea;   --ok-border:#067a5240;

  /* no claro a sombra é o que existe: muito suave, cor do próprio violeta
     escurecido, nunca preto puro (preto sobre branco fica sujo) */
  --s1:0 1px 2px #1a163808;
  --s2:0 1px 2px #1a16380a,0 8px 24px #1a163812;
  --s3:0 24px 60px #1a16381f;
  --luz-topo:inset 0 1px 0 #ffffff00;
  --sombra-cartao:var(--s2);
  --sombra:var(--s3);
  --sombra-capa:0 6px 18px #1a16381f;

  --panel:var(--n50);
  --silhueta:#2b2b3f;
  --fio:#00000022;
  --input-bg:#00000008;
  --btn-sec-bg:#00000010;
  --navbg:#f7f6fbe6;
  --barra-trilho:#00000012;
  --marcador-off:#00000022;
  --n-contorno:#00000030;

  --palco-ceu:#efeaf9; --palco-silhueta:#241a35; --palco-halo:91,52,206;
  --palco-borda:rgba(74,43,163,.35);
  --letra-espera:#6a6a86;
}

/* =========================================================================
   COR DE MARCA — violeta.

   Só entra quando a pessoa NÃO escolheu um skin (site) ou está no skin
   padrão 'rosa' (app). Ver a nota 2 no topo do arquivo: sem isto, escolher
   "Mar"/"Mata"/"Fogo" no tema claro pararia de funcionar.

   --accent  : cor de marca, e também COR DE TEXTO (o app pinta
               .grupo-tit, .btlimpa, .ed-aviso e a sílaba atual com ela)
               → precisa fechar 4,5:1 sobre --cx e sobre --cx2.
   --accent2 : segundo tom, usado em degradê e preenchimento.
   --btn-a/-b: fundo de botão com texto BRANCO em cima → medido contra #fff.
               É outro token justamente porque o violeta que passa como
               texto e o violeta que passa como fundo não são o mesmo.
   ========================================================================= */
/* ATENÇÃO — por que isto está dividido em dois pedaços.
   Antes, os 16 tokens abaixo moravam TODOS num bloco escopado em
   `:root:not([data-skin]), :root[data-skin=rosa]`. O app grava um skin em
   toda carga (`dataset.skin = cfg.skin || 'violeta'`), então bastava o nome
   do skin padrão não ser "rosa" pra NENHUM dos dois seletores casar: 13
   tokens viravam string vazia e 10 botões primários perdiam o fundo —
   branco sobre branco, 1,00:1, medido. Trocar o nome no seletor só empurra
   a armadilha pro próximo skin: escolher "Mar" quebraria igual.
   Regra daqui pra frente: só a TRINCA de destaque (--accent, --accent2,
   --accent2-txt) depende do skin. Todo o resto é identidade da marca e
   vale sempre, seja qual for o skin escolhido.
   O `#tela` (palco) leva o bloco escuro nos dois temas. */
:root, #tela{
  --marca:var(--v500);       /* o violeta "de catálogo", só em superfície grande */
  --btn-a:var(--v600);       /* #fff em cima = 5,78:1 */
  --btn-b:#5f3ad9;           /* #fff em cima = 6,79:1 */
  --ativo-fundo:#7c5cff2e;   /* pílula do item ativo da lateral */
  --ativo-fg:var(--accent2-txt, #b9a5ff);
  --selo-borda:#7c5cff40; --selo-fundo:#7c5cff14;
  --luz-a:#7c5cff2b; --luz-b:#a78bfa33; --luz-c:#5b34ce33;
  --n-contorno-aceso:#a78bfaa6;
  --escada-base:#ffffff2b; --escada-base2:#ffffff0d; --escada-brilho:#7c5cff40;
  --plano-pro-fundo:#191a35; --plano-pro-brilho:#7c5cff1f;
}
:root[tema=claro], :root[data-tema=claro]{
  --marca:var(--v500);
  --btn-a:var(--v700);       /* #fff em cima = 7,43:1 */
  --btn-b:#6644e0;           /* #fff em cima = 6,06:1 */
  --ativo-fundo:#7c5cff1a;   /* lilás 10% sobre branco = #f2efff */
  --ativo-fg:var(--accent);  /* 6,57:1 sobre essa pílula — medido */
  --selo-borda:#5b34ce40; --selo-fundo:#5b34ce0f;
  --luz-a:#7c5cff1f; --luz-b:#5b34ce26; --luz-c:#a78bfa2b;
  --n-contorno-aceso:#5b34cea6;
  --escada-base:#00000038; --escada-base2:#00000012; --escada-brilho:#5b34ce33;
  --plano-pro-fundo:#f6f3ff; --plano-pro-brilho:#7c5cff14;
}

/* A trinca de destaque, essa sim, é do skin padrão da marca. */
:root:not([data-skin]),
:root[data-skin=violeta],
:root:not([data-skin]) #tela,
:root[data-skin=violeta] #tela{
  --accent:#9d80ff;          /* 5,49:1 sobre --cx · 4,62:1 sobre --cx2 */
  --accent2:var(--v400);     /* 6,08:1 sobre --cx */
  --accent2-txt:#b9a5ff;     /* 7,79:1 sobre --cx */
}
:root:not([data-skin])[tema=claro],   :root:not([data-skin])[data-tema=claro],
:root[data-skin=violeta][tema=claro], :root[data-skin=violeta][data-tema=claro]{
  --accent:var(--v700);      /* #5b34ce — 7,43:1 sobre branco */
  --accent2:#6644e0;         /* 6,06:1 sobre branco, e #fff em cima = 6,06:1 */
  --accent2-txt:#5636d6;     /* 7,26:1 sobre branco */
}

/* =========================================================================
   CONTRASTE MEDIDO (WCAG 2.1, fórmula de luminância relativa).
   Cada par abaixo foi calculado, não estimado. Texto normal precisa 4,5:1.

   CLARO — sobre #ffffff (cartão) / #f7f6fb (página)
     --fg      #16162b   17,74 / 16,50
     --forte   #33334a   12,26 / 11,40
     --dim     #56566e    7,11 /  6,62
     --accent  #5b34ce    7,43 /  6,91   (também 6,93 sobre --cx2)
     --accent2 #6644e0    6,06 /  5,63
     --good    #0a7d55    5,15 /  4,79
     --atencao #8a5000    6,51 /  6,05   (6,08 sobre o fundo âmbar do aviso)
     --erro-fg #a3123f    7,73 /   —
     #fff sobre --btn-a (#5b34ce)  7,43
     #fff sobre --btn-b (#6644e0)  6,06

   ESCURO — sobre #1b1c38 (cartão) / #0f1024 (página) / #292a44 (--cx2)
     --fg          #f2f1fa  14,76 / 16,73 /   —
     --forte       #d6d4ea  11,39 / 12,92 /  9,59
     --dim         #9c9ac0   6,14 /  6,96 /  5,17
     --accent      #9d80ff   5,49 /  6,22 /  4,62
     --accent2     #a78bfa   6,08 /  6,89 /  5,11
     --accent2-txt #b9a5ff   7,79 /  8,83 /  6,55
     --good        #2ce8a0  10,36 / 11,75 /  8,72
     --atencao     #ffc06b  10,24 /   —   /   —
     --erro-fg     #ff9db5   8,46 /   —   /   —
     #fff sobre --btn-a (#6b46e5)  5,78
     #fff sobre --btn-b (#5f3ad9)  6,79

   Por que --accent claro é #5b34ce e não o #7C5CFF da referência: branco
   sobre #7C5CFF dá 4,35:1 e #7C5CFF como texto sobre branco dá 4,35:1 —
   reprova nos dois sentidos. O #7C5CFF continua existindo como --marca,
   usado só onde não há texto pequeno em cima (fundo de herói, degradês,
   luz de palco). Mesmo raciocínio que o produto já usava pro rosa
   (#ff2d78 no escuro vira #c4145a no claro).
   ========================================================================= */
