/* Ally — tokens da identidade visual.
 *
 * Valores medidos dos arquivos em identidade_visual/, não estimados. Ver README.md.
 * Nomes em português para acompanhar a convenção do web/src/styles.css.
 *
 * A identidade é dark-first: não há peça sobre fundo claro no material recebido.
 * Não existe tema claro aqui — se um dia existir, ele vem de decisão nova, não daqui.
 */

/* ---- Poppins auto-hospedada (P-fonte, 07/10/2026): fonts/*.woff2, licença em fonts/OFL.txt.
   Sem CDN: o deploy é a rede interna da YouX. Pesos 400/500/600, latin + latin-ext (os mesmos
   arquivos do ally, web/public/fonts). URL relativa a este arquivo: vale servido pela app
   (/identidade/tokens.css → /identidade/fonts/) e aberto do disco pela tela.html. ---- */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;

  /* ---- Marca — H 253–255, mais azul e mais saturado que o campo.
     A diferença de matiz é o que destaca a marca do fundo. Não aproxime. ---- */
  --ally-violeta-realce:   #B19BFF;
  --ally-violeta-claro:    #A589FF;
  --ally-violeta:          #8F71FF;  /* a cor da marca */
  --ally-violeta-medio:    #7B58F4;
  --ally-violeta-profundo: #5638B7;
  --ally-violeta-sombra:   #261757;

  /* ---- Campo — H 266–271. Fundos e gradientes. ---- */
  --ally-abismo:    #1D0D2F;
  --ally-fundo:     #281240;  /* o fundo canônico */
  --ally-elevado:   #391E54;
  --ally-elevado-2: #422A5B;
  --ally-bruma:     #684D83;

  /* ---- Acento — H 312–313. Só do término claro do Gradiente 02.
     Decorativo. Reprova para texto corrido (3,44:1 sobre o fundo). ---- */
  --ally-lilas:   #D59EFA;
  --ally-orquidea:#AA7AD0;
  --ally-magenta: #A45593;

  /* ---- Neutro. O lettering é #EAEAEA, declarado no SVG. Não use #FFF. ---- */
  --ally-neutro:       #EAEAEA;
  --ally-neutro-claro: #F7F3FF;

  /* ---- Papéis de texto sobre o fundo canônico (contrastes verificados) ---- */
  --ally-texto:            var(--ally-neutro);        /* 13,96:1  AAA */
  --ally-texto-suave:      #B7A8CE;                   /*  7,60:1  AAA — derivado, não do material */
  --ally-grafico-campo:    #8A6BA8;                   /*  4,12:1  objeto gráfico WCAG 1.4.11 — derivado, não do material */
  --ally-texto-em-violeta: var(--ally-abismo);        /*  5,19:1  AA — ver aviso abaixo */

  /* AVISO: #EAEAEA sobre --ally-violeta dá 2,92:1 e REPROVA.
     Botão de violeta cheio leva texto escuro (--ally-texto-em-violeta). */

  /* ---- Traço. O contorno das letras gigantes do key visual é o fundo
     levantado em ~8% de branco — um sussurro, não uma borda. ---- */
  --ally-traco:       rgba(255, 255, 255, 0.08);
  --ally-traco-forte: rgba(255, 255, 255, 0.16);

  /* ---- Gradientes.
     ~60% da área é campo chapado; a luz é um bloom fora de quadro no terço final.
     Por isso são radiais deslocados sobre cor sólida, não linear-gradient. ---- */
  --ally-gradiente-01:
    radial-gradient(120% 90% at -10% 50%, #7B42C3 0%, #5B3490 22%, #31174F 48%, transparent 72%),
    var(--ally-abismo);

  --ally-gradiente-02:
    radial-gradient(85% 70% at 108% 88%, #B56690 0%, #A164CD 18%, #9254C1 34%, #5B357D 58%, transparent 80%),
    radial-gradient(70% 90% at 105% 30%, #684D83 0%, transparent 65%),
    var(--ally-fundo);

  /* ---- Tipografia. Poppins (informado pela produção em 09/08/2026), auto-hospedada:
     o @font-face está no topo deste arquivo. O resto da pilha é fallback. ---- */
  --ally-fonte: Poppins, "Segoe UI", system-ui, -apple-system, sans-serif;
  --ally-fonte-mono: "JetBrains Mono", Consolas, "Courier New", monospace;

  /* O "Y" do wordmark é desenho customizado, não Poppins: o lockup é imagem,
     nunca texto vivo. Não tente recompor digitando. */

  /* ---- Forma. Nada de aresta viva: o material não tem nenhuma. ---- */
  --ally-raio:        12px;
  --ally-raio-grande: 28px;
  --ally-raio-bloom:  40% 40% 44% 44% / 46% 42% 46% 42%;  /* curva côncava larga da fronteira */

  /* ---- Lockup — proporções medidas (README §3.3). ---- */
  --ally-lockup-proporcao: 3.442;   /* 1748.81 / 508.09 */
  --ally-simbolo-proporcao: 1;      /* 511.75 / 512.00 */
  --ally-simbolo-por-cap: 1.805;    /* altura do símbolo ÷ cap-height do ALLY (283.65) */
  --ally-respiro-marca: 0.384em;    /* símbolo → ALLY, em cap-heights */
}

/* O grão do Gradiente 02 é identidade, não ruído de exportação: é o que dá matéria
   ao roxo chapado e evita banding numa área escura grande. Aplique como camada,
   não aumentando o número de paradas do gradiente. */
.ally-grao::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- A marca em movimento (README §7). O toro e a esfera em duas camadas, na colocação do SVG
   (README §5), dentro de uma caixa quadrada de --ally-marca-tam. Parada, é o símbolo como no
   arquivo; com .is-viva, a esfera dá uma volta em torno do toro (pela frente, que cresce, e por
   trás, que diminui e aparece pelo furo) e pousa no lugar, a cada 3,2 s. Só translate, scale e
   opacity: rotate gira o brilho pintado da esfera e inverte a luz, que vem de cima e da direita.
   O laço começa e termina com a esfera no lugar: quem para o movimento tira o .is-viva no fim
   de uma volta (evento animationiteration da esfera) e a esfera não salta. ---- */
.ally-marca {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: var(--ally-marca-tam, 22px);
  height: var(--ally-marca-tam, 22px);
}
.ally-marca > img {
  position: absolute;
  display: block;
  max-width: none;
}
.ally-marca-toro { left: 0; top: 5.53%; width: 100%; height: 94.53%; z-index: 1; }
.ally-marca-esfera { left: 81.49%; top: 0; width: 18%; height: 18%; z-index: 2; }
/* A luz atrás do toro, só em movimento: o bloom da identidade, não um contorno. */
.ally-marca::before {
  content: "";
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(143, 113, 255, 0.42), rgba(143, 113, 255, 0) 100%);
  opacity: 0;
  pointer-events: none;
}
.ally-marca.is-viva .ally-marca-esfera {
  animation: ally-marca-orbita 3.2s linear var(--ally-marca-atraso, 0s) infinite;
}
.ally-marca.is-viva .ally-marca-toro {
  animation: ally-marca-respira 3.2s ease-in-out var(--ally-marca-atraso, 0s) infinite;
}
.ally-marca.is-viva::before {
  animation: ally-marca-brilho 3.2s ease-in-out var(--ally-marca-atraso, 0s) infinite;
}
/* Gerado de uma elipse inclinada pelo centro do furo e pela esfera parada (semieixo menor 0,20 da
   caixa), com entrada e saída suaves; translate em % da própria esfera (0,18 da caixa). A esfera
   passa à frente do toro (z 2) e atrás dele (z 0) longe da silhueta, sem salto visível. */
@keyframes ally-marca-orbita {
  0% { transform: none; z-index: 2; }
  2.44% { transform: translate(1.2%, 1.2%) scale(1.002); z-index: 2; }
  4.88% { transform: translate(4.5%, 5.0%) scale(1.010); z-index: 2; }
  7.31% { transform: translate(8.9%, 12.5%) scale(1.022); z-index: 2; }
  9.75% { transform: translate(12.8%, 24.8%) scale(1.038); z-index: 2; }
  12.19% { transform: translate(14.0%, 43.9%) scale(1.058); z-index: 2; }
  14.62% { transform: translate(10.1%, 71.2%) scale(1.081); z-index: 2; }
  17.06% { transform: translate(-1.9%, 108.0%) scale(1.105); z-index: 2; }
  19.50% { transform: translate(-24.3%, 154.8%) scale(1.127); z-index: 2; }
  21.94% { transform: translate(-59.0%, 210.5%) scale(1.146); z-index: 2; }
  24.38% { transform: translate(-106.2%, 272.4%) scale(1.158); z-index: 2; }
  26.81% { transform: translate(-164.6%, 336.2%) scale(1.159); z-index: 2; }
  29.25% { transform: translate(-230.5%, 396.0%) scale(1.149); z-index: 2; }
  31.69% { transform: translate(-298.7%, 445.4%) scale(1.127); z-index: 2; }
  34.12% { transform: translate(-362.4%, 478.1%) scale(1.092); z-index: 2; }
  36.56% { transform: translate(-414.8%, 489.6%) scale(1.048); z-index: 2; }
  39.00% { transform: translate(-449.9%, 477.8%) scale(1.000); z-index: 2; }
  41.44% { transform: translate(-463.8%, 443.5%) scale(0.952); z-index: 0; }
  43.88% { transform: translate(-455.5%, 390.5%) scale(0.908); z-index: 0; }
  46.31% { transform: translate(-426.6%, 324.9%) scale(0.873); z-index: 0; }
  48.75% { transform: translate(-381.4%, 253.9%) scale(0.851); z-index: 0; }
  51.19% { transform: translate(-325.7%, 184.5%) scale(0.841); z-index: 0; }
  53.62% { transform: translate(-265.5%, 122.4%) scale(0.842); z-index: 0; }
  56.06% { transform: translate(-206.6%, 71.5%) scale(0.854); z-index: 0; }
  58.50% { transform: translate(-153.1%, 33.6%) scale(0.873); z-index: 0; }
  60.94% { transform: translate(-107.7%, 8.4%) scale(0.895); z-index: 0; }
  63.38% { transform: translate(-71.7%, -5.8%) scale(0.919); z-index: 0; }
  65.81% { transform: translate(-44.6%, -11.4%) scale(0.942); z-index: 0; }
  68.25% { transform: translate(-25.6%, -11.2%) scale(0.962); z-index: 0; }
  70.69% { transform: translate(-13.0%, -8.1%) scale(0.978); z-index: 0; }
  73.12% { transform: translate(-5.3%, -4.2%) scale(0.990); z-index: 0; }
  75.56% { transform: translate(-1.2%, -1.1%) scale(0.998); z-index: 0; }
  78%, 100% { transform: none; z-index: 2; }
}
@keyframes ally-marca-respira {
  0%, 78%, 100% { transform: none; }
  39% { transform: scale(1.03); }
}
@keyframes ally-marca-brilho {
  0%, 78%, 100% { opacity: 0; }
  39% { opacity: 1; }
}
@keyframes ally-marca-pisca {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .ally-marca.is-viva .ally-marca-esfera { animation-name: ally-marca-pisca; animation-timing-function: ease-in-out; }
  .ally-marca.is-viva .ally-marca-toro,
  .ally-marca.is-viva::before { animation: none; }
}