/*
 * 21_ellevu.css — as classes da PLATAFORMA (MARCA-APLICACAO.md §2.4 e §2.5)
 * ═══════════════════════════════════════════════════════════════════════════
 * Contrato de nomes entre os pacotes da marca: este arquivo escreve as regras,
 * as views (logos, rodapé, console, landing) só põem as classes no HTML.
 *
 * Tudo aqui usa `--ellevu-*`, que o tenant NÃO sobrescreve: é o que aparece
 * igual em qualquer conta. O que é do tenant continua saindo dos cinco papéis
 * `--cor-marca*` e das classes normais (`.botao--primario` etc.).
 *
 * Vem DEPOIS de 20_navegacao.css (a cascata é a ordem alfabética das folhas),
 * então pode refinar `.marca` sem `!important`.
 */

/* ── Símbolo e logos por tema ─────────────────────────────────────────────── */

/* O símbolo sozinho (o "é" com o acento que sobe). Só onde o nome já está
   por perto: "powered by", loader, guia de estilo. */
.marca__simbolo { height: 1.5rem; width: auto; flex: none; color: var(--ellevu-logo) }

/* Tenant com os DOIS logos (claro e escuro): o HTML traz os dois e o CSS
   escolhe pelo tema. Escuro é o padrão do produto, então é ele que aparece
   sem atributo nenhum. O seletor de atributo (e não `:root[…]`) segue a regra
   de 01_tokens.css: uma ilha clara dentro da página também escolhe certo. */
.marca__logo--tema-claro { display: none }
[data-theme="light"] .marca__logo--tema-escuro { display: none }
[data-theme="light"] .marca__logo--tema-claro { display: inline-block }

/* ── "Powered by" ─────────────────────────────────────────────────────────── */

/* Discreto de propósito: é a assinatura da plataforma dentro da casa do
   cliente, não uma segunda marca disputando o cabeçalho. */
.assinatura-ellevu {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  color: var(--texto-tenue);
  font-size: var(--texto-sm);
  line-height: var(--altura-normal);
  text-decoration: none;
  vertical-align: middle;
}
/* 1,25rem (20 px) e não 1rem: a 16 px o símbolo saía com 11 x 14 px de
   tinta e virava um clipe de papel (revisão de design). O `viewBox` do
   símbolo é justo, então a altura toda é desenho. */
.assinatura-ellevu .marca__simbolo { height: 1.25rem; color: var(--ellevu-logo) }
/* Ao lado do logo do tenant: 2X de respiro e um fio grafite (MARCA-ELLEVU.md §6). */
.marca__logo + .assinatura-ellevu,
.marca__logo--tema-claro + .assinatura-ellevu,
.assinatura-ellevu--ao-lado {
  border-left: 1px solid var(--ellevu-grafite);
  padding-left: var(--esp-6);
  margin-left: var(--esp-6);
}
a.assinatura-ellevu:hover { color: var(--texto-suave) }

/* No menu do admin a assinatura é o último item: mesmo recuo do texto dos
   itens (o `padding` de 1rem dos links), fora da fita de destinos por um fio
   e um respiro. Antes ela começava em x=32 com os itens em x=48, grudada em
   "Conta" (revisão de design de 24/09). */
.navegacao--admin > .assinatura-ellevu {
  flex: none;
  padding-inline: var(--esp-4);
  white-space: nowrap;
}
@media (min-width: 64rem) {
  .navegacao--admin > .assinatura-ellevu {
    margin-top: var(--esp-4);
    padding-top: var(--esp-5);
    border-top: 1px solid var(--borda);
  }
}

/* ── Console do super-admin ───────────────────────────────────────────────── */

/* O console nunca veste o tenant: wordmark na cor do logo e o selo "console"
   em menta sobre menta-sombra (10,68:1). */
.marca--console { color: var(--ellevu-logo) }
.marca--console .marca__wordmark { color: var(--ellevu-logo) }
.marca--console .marca__selo,
.marca--console .marca__sufixo {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem var(--esp-2);
  border-radius: var(--raio-redondo);
  background: var(--ellevu-menta-sombra);
  color: var(--ellevu-menta);
  font-family: var(--fonte);
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--espacamento-etiqueta);
}
/* No claro a menta seria texto sobre claro (proibido, §0.8). A névoa
   (#E7FFF8) sobre o papel (#F5F3F1) sumia e só o texto verde aparecia
   (revisão de design): o selo vira a menta CHEIA como superfície, com tinta
   por cima (14,72:1), a mesma regra do `.botao--ellevu` no claro. */
[data-theme="light"] .marca--console .marca__selo,
[data-theme="light"] .marca--console .marca__sufixo {
  background: var(--ellevu-menta);
  color: var(--ellevu-tinta);
}

/* ── Botão e faixa da plataforma ──────────────────────────────────────────── */

/* A menta CHEIA, com tinta por cima (14,72:1), nos dois temas. Só em tela da
   Ellévu (landing do host raiz, criar conta, console): dentro do tenant o
   primário é `.botao--primario`, que obedece à cor do cliente. */
.botao--ellevu {
  --botao-fundo: var(--ellevu-menta);
  --botao-texto: var(--ellevu-tinta);
  --botao-borda: transparent;
  /* A sombra é SEMPRE da menta: o botão é da plataforma, e o `--sombra-marca`
     do token segue a cor do tenant. A fonte é a do corpo, como todo botão
     (a Plus Jakarta Sans fica em título e número, §2.6): com ela só aqui,
     "Criar conta" e "Entrar" saíam em duas famílias na mesma página. */
  --sombra-marca: 0 6px 20px color-mix(in srgb, var(--ellevu-menta) 16%, transparent);
  font-weight: var(--peso-forte);
  box-shadow: var(--sombra-marca);
}
/* No claro a menta sobre branco some (1,17:1): a silhueta do botão vem de um
   contorno tinta. */
[data-theme="light"] .botao--ellevu {
  --botao-borda: var(--ellevu-tinta);
  --sombra-marca: 0 6px 20px rgb(33 25 21 / 0.14);
}
/* Hover sem mexer no preenchimento (10_componentes.css, "HOVER NÃO MEXE NO
   PREENCHIMENTO DE BOTÃO CHEIO"): anel tinta e elevação, como `.botao`. */
.botao--ellevu:hover {
  border-color: var(--ellevu-tinta);
  box-shadow: var(--sombra-marca), var(--sombra-2);
}
a.botao--ellevu, a.botao--ellevu:hover { color: var(--ellevu-tinta); text-decoration: none }

.faixa-ellevu {
  background: var(--ellevu-menta);
  color: var(--ellevu-tinta);
}
.faixa-ellevu :where(h1, h2, h3, p, strong) { color: inherit }
.faixa-ellevu a { color: var(--ellevu-tinta); text-decoration-line: underline }
.faixa-ellevu a:hover { color: var(--ellevu-tinta) }
/* O logo sobre a menta é tinta, em qualquer tema (MARCA-ELLEVU.md §3). */
.faixa-ellevu .marca__wordmark,
.faixa-ellevu .marca__simbolo { color: var(--ellevu-tinta) }

/* Foco sobre a menta: o anel padrão é `--cor-marca`, que no escuro É a menta
   e sumiria em volta dela. Aqui o anel é tinta (14,72:1). */
.botao--ellevu:focus-visible,
.faixa-ellevu :focus-visible {
  outline-color: var(--ellevu-tinta);
}
.botao--ellevu:focus-visible { box-shadow: 0 0 0 2px var(--ellevu-menta), var(--sombra-marca) }

/* ── Carregando ───────────────────────────────────────────────────────────── */

/* O símbolo com o acento subindo: o "é" que eleva. O acento é o ÚLTIMO
   `<path>` do símbolo (ellevu-simbolo-*.svg). Só `transform` e `opacity`,
   que o navegador anima fora da thread principal. */
.carregando-ellevu {
  display: inline-grid;
  place-items: center;
  color: var(--ellevu-logo);
}
.carregando-ellevu .marca__simbolo { height: 2.5rem }
.carregando-ellevu svg path:last-child {
  transform-box: fill-box;
  transform-origin: 0% 100%;
  animation: ellevu-acento-sobe 900ms cubic-bezier(0.22, 1, 0.36, 1) infinite alternate;
}
@keyframes ellevu-acento-sobe {
  from { transform: translate(-12%, 12%); opacity: 0.35 }
  to   { transform: none; opacity: 1 }
}
@media (prefers-reduced-motion: reduce) {
  .carregando-ellevu svg path:last-child { animation: none }
}

/* ── Números grandes e títulos de cartão ──────────────────────────────────── */

/* A Plus Jakarta Sans vai nos títulos (02_base.css) e aqui, nos números que
   o olho procura: placar, medidor, contagem. Sempre tabulares, para "09:59"
   não pular de largura ao virar "10:00". */
.cartao__titulo,
.landing-cartao__titulo,
.numero__valor,
.sequencia__valor,
.resultado__acertos,
.pratica-resultado__placar,
.contador,
.ritmo__valor,
.medidor__valor {
  font-family: var(--fonte-titulo);
  word-spacing: var(--espaco-palavra-titulo);
  font-variant-numeric: tabular-nums;
}