/*
 * Os tokens do Nivexa License Manager: um só sistema visual para o site, o portal e o painel
 * (D-19), a partir do pacote de marca. A doc 05 (`docs/05-sistema-visual.md`) diz o porquê de cada
 * valor e as regras de uso.
 *
 * **Os nomes e a escala são os do Cost** (`_nivexa_Cost/packages/ui/src/temas/tokens.css`), com o
 * mesmo prefixo da família, `--np-`: uma paleta bruta (`--np-c-…`, os únicos valores de cor
 * escritos na web) e, por cima, os tokens semânticos (`--np-ink`, `--np-surface`, …) que mudam com o
 * tema. O Tailwind lê os semânticos (`app/globals.css`). Um componente nunca usa a paleta bruta.
 *
 * O tema aplica-se pelo atributo `data-tema` no `<html>`. **Escuro por omissão** (D-19): o layout
 * raiz põe `data-tema="escuro"`. Os valores do claro existem e passam o contraste, mas o tema claro
 * não está em uso (fica para depois, D-19).
 *
 * **O acento da casa é o par grafite / gelo do logótipo** (J-Ba, doc 05 §2): não é a cor de nenhum
 * produto. As cores de produto (Azul Cost, Verde Plan) e as de estado vivem à parte, e o
 * `tokens.test.ts` afirma que não se confundem.
 */

:root {
  /* ── Paleta bruta ─────────────────────────────────────────────────────── */

  /* Tema claro (os do Cost; o Verde Plan é o do pacote de marca) */
  --np-c-grafite: #1b2733;
  --np-c-grafite-escuro: #0e161e;
  --np-c-ardosia: #45525f;
  --np-c-cinza-texto: #66707a;
  --np-c-branco: #ffffff;
  --np-c-nevoa: #f5f7f8;
  --np-c-nevoa-2: #e9edf1;
  --np-c-linha: #dfe4e8;
  --np-c-linha-forte: #c9ced4;
  --np-c-azul-cost: #1463c4;
  --np-c-verde-plan: #1e9e6a;
  --np-c-vermelho: #e0342b;
  --np-c-ambar: #e8a33d;
  --np-c-ambar-texto: #946100;
  --np-c-turquesa: #0e7c74;
  --np-c-lima: #3d7a00;
  --np-c-violeta: #6d4fc4;
  --np-c-laranja: #b44d0c;
  --np-c-carmim: #c42b22;

  /* Tema escuro */
  --np-c-grafite-fundo: #16202a;
  --np-c-grafite-elevado: #223040;
  --np-c-grafite-selecao: #2a3846;
  --np-c-gelo: #e8edf1;
  --np-c-neblina: #a9b4bf;
  --np-c-cinza-frio: #8f9aa4;
  --np-c-linha-escura: #2b3846;
  --np-c-linha-escura-forte: #3a4653;
  --np-c-azul-cost-claro: #639ce8;
  --np-c-verde-plan-claro: #63e894;
  --np-c-vermelho-claro: #ff6b60;
  --np-c-ambar-claro: #f0b45c;
  --np-c-turquesa-clara: #4cc2b4;
  --np-c-lima-clara: #92bf4c;
  --np-c-violeta-clara: #bd99f2;
  --np-c-laranja-clara: #f3904a;
  --np-c-carmim-claro: #f9646a;

  /* Sombras: o escuro separa com bordas; a sombra só levanta o que flutua. */
  --np-c-sombra: rgb(0 0 0 / 0.12);
  --np-c-sombra-escura: rgb(0 0 0 / 0.45);
  --np-c-veu: rgb(14 22 30 / 0.4);
  --np-c-veu-escuro: rgb(8 12 17 / 0.7);

  /*
   * ── Marca: não muda com o tema. ───────────────────────────────────────
   * O «N» e os ícones dos produtos usam sempre as cores do pacote (D-28); a interface no escuro usa
   * os tons claros de `--np-produto-*`.
   */
  --np-marca: var(--np-c-grafite);
  --np-marca-tinta: var(--np-c-branco);
  --np-marca-azul: var(--np-c-azul-cost);
  --np-marca-verde: var(--np-c-verde-plan);

  /* ── Tokens semânticos, tema claro ───────────────────────────────────── */
  --np-ink: var(--np-c-grafite);
  --np-ink-2: var(--np-c-ardosia);
  /* O cinza do Cost (#777e85) fica a 4,1:1 no branco; o painel escreve com o ink-3, por isso AA. */
  --np-ink-3: var(--np-c-cinza-texto);

  --np-surface: var(--np-c-branco);
  --np-surface-2: var(--np-c-nevoa);
  --np-surface-3: var(--np-c-nevoa-2);
  --np-border: var(--np-c-linha);
  --np-border-forte: var(--np-c-linha-forte);

  /* O acento da casa: grafite no claro, gelo no escuro (o logótipo). */
  --np-accent: var(--np-c-grafite);
  --np-accent-weak: var(--np-c-nevoa-2);
  --np-accent-strong: var(--np-c-grafite-escuro);
  --np-accent-texto: var(--np-c-branco);
  --np-foco: var(--np-c-grafite);

  /*
   * A cor de cada produto na interface (D-19, D-28): uma série de gráfico, a ação principal de uma
   * página de produto no site. Nunca texto. O pacote Cost + Plan é o acento da casa (D-28).
   */
  --np-produto-cost: var(--np-c-azul-cost);
  --np-produto-plan: var(--np-c-verde-plan);
  --np-produto-pacote: var(--np-c-grafite);
  /* O texto de um botão na cor do produto (a ação principal de uma página de produto, D-28). */
  --np-produto-cost-texto: var(--np-c-branco);
  --np-produto-plan-texto: var(--np-c-grafite-escuro);

  --np-critical: var(--np-c-vermelho);
  /* O botão de uma ação destrutiva (revogar): fundo e texto. */
  --np-perigo: var(--np-c-carmim);
  --np-perigo-texto: var(--np-c-branco);
  --np-warning: var(--np-c-ambar);
  --np-warning-texto: var(--np-c-ambar-texto);
  --np-info: var(--np-c-turquesa);

  /*
   * Os estados (doc 05 §4). Leem-se como texto (AA) e nunca andam sós: cada um tem também um
   * ícone de forma própria e a palavra.
   */
  --np-estado-ativa: var(--np-c-lima);
  --np-estado-trial: var(--np-c-violeta);
  --np-estado-pendente: var(--np-c-ardosia);
  --np-estado-a-terminar: var(--np-c-ambar-texto);
  --np-estado-suspensa: var(--np-c-laranja);
  --np-estado-revogada: var(--np-c-carmim);
  --np-estado-expirada: var(--np-c-cinza-texto);

  /* Gráficos: grelha e eixos recessivos; a série da casa é o acento. */
  --np-grafico-grelha: var(--np-c-linha);
  --np-grafico-eixo: var(--np-ink-3);
  --np-grafico-casa: var(--np-accent);
  --np-grafico-apagado: var(--np-c-linha-forte);

  --np-sombra-flutuante: 0 8px 24px var(--np-c-sombra);
  --np-veu: var(--np-c-veu);

  /* Tipografia: Inter na interface, Poppins só no logótipo (D-19). */
  --np-fonte: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --np-fonte-marca: 'Poppins', 'Montserrat', var(--np-fonte);
  --np-fonte-mono: 'Cascadia Mono', 'Consolas', ui-monospace, monospace;
  --np-tamanho-legenda: 11px;
  --np-tamanho-pequeno: 12px;
  --np-tamanho-base: 13px;
  --np-tamanho-secao: 15px;
  --np-tamanho-titulo: 20px;
  --np-tamanho-numero: 26px;
  /* O site (J-Bb): uma montra lê-se mais de longe do que o painel. Só no site e no portal. */
  --np-tamanho-site: 16px;
  --np-tamanho-site-entrada: 18px;
  --np-tamanho-site-subtitulo: 24px;
  --np-tamanho-site-titulo: 32px;
  --np-tamanho-site-destaque: 44px;
  --np-tamanho-site-hero: 56px;

  /* Forma. O espaço é a grelha de 4 px do Tailwind (`p-1` = 4 px); os controlos têm 32 px (`h-8`). */
  --np-raio: 4px;
  --np-raio-cartao: 6px;
  --np-altura-linha: 36px;
  --np-largura-minima: 1024px;

  /* Movimento: curto e sem ressalto. `prefers-reduced-motion` põe tudo a zero. */
  --np-duracao-rapida: 120ms;
  --np-duracao: 180ms;
  --np-curva: cubic-bezier(0.2, 0, 0, 1);
}

[data-tema='escuro'] {
  /* O tema escuro usa a cor da marca como superfície. */
  --np-ink: var(--np-c-gelo);
  --np-ink-2: var(--np-c-neblina);
  --np-ink-3: var(--np-c-cinza-frio);

  --np-surface: var(--np-c-grafite);
  --np-surface-2: var(--np-c-grafite-fundo);
  --np-surface-3: var(--np-c-grafite-elevado);
  --np-border: var(--np-c-linha-escura);
  --np-border-forte: var(--np-c-linha-escura-forte);

  --np-accent: var(--np-c-gelo);
  --np-accent-weak: var(--np-c-grafite-selecao);
  --np-accent-strong: var(--np-c-branco);
  --np-accent-texto: var(--np-c-grafite);
  --np-foco: var(--np-c-gelo);

  /* As cores de produto clareiam para manter o contraste sobre o grafite; o pacote é o gelo (D-28). */
  --np-produto-cost: var(--np-c-azul-cost-claro);
  --np-produto-plan: var(--np-c-verde-plan-claro);
  --np-produto-pacote: var(--np-c-gelo);
  --np-produto-cost-texto: var(--np-c-grafite-escuro);
  --np-produto-plan-texto: var(--np-c-grafite-escuro);

  --np-critical: var(--np-c-vermelho-claro);
  --np-perigo: var(--np-c-carmim-claro);
  --np-perigo-texto: var(--np-c-grafite-escuro);
  --np-warning: var(--np-c-ambar-claro);
  --np-warning-texto: var(--np-c-ambar-claro);
  --np-info: var(--np-c-turquesa-clara);

  --np-estado-ativa: var(--np-c-lima-clara);
  --np-estado-trial: var(--np-c-violeta-clara);
  --np-estado-pendente: var(--np-c-neblina);
  --np-estado-a-terminar: var(--np-c-ambar-claro);
  --np-estado-suspensa: var(--np-c-laranja-clara);
  --np-estado-revogada: var(--np-c-carmim-claro);
  --np-estado-expirada: var(--np-c-cinza-frio);

  --np-grafico-grelha: var(--np-c-linha-escura);
  --np-grafico-apagado: var(--np-c-linha-escura-forte);

  --np-sombra-flutuante: 0 12px 32px var(--np-c-sombra-escura);
  --np-veu: var(--np-c-veu-escuro);

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --np-duracao-rapida: 0ms;
    --np-duracao: 0ms;
  }
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fontes/inter-latin-400-normal.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: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fontes/inter-latin-600-normal.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: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fontes/inter-latin-ext-400-normal.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: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fontes/inter-latin-ext-600-normal.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;
}
/*
 * A página «em breve» (J06c). A construção junta, por esta ordem, `temas/tokens.css`, o Inter e
 * esta folha: aqui só se usam os tokens semânticos (D-19), no tema escuro, como o site. Sem
 * `style=` no HTML nem `<style>`: a CSP só deixa esta folha.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--np-surface-2);
  color: var(--np-ink);
  font-family: var(--np-fonte);
  font-size: var(--np-tamanho-site);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* O brilho do site, a 13 % do acento da casa (D-38). */
  background:
    radial-gradient(56rem 26rem at 50% -8rem, color-mix(in oklab, var(--np-accent) 13%, transparent), transparent 72%),
    var(--np-surface);
}

h1,
h2,
p,
ul,
dl,
dd {
  margin: 0;
}

a {
  color: var(--np-ink);
  text-decoration: underline;
  text-decoration-color: var(--np-border-forte);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--np-duracao-rapida) var(--np-curva);
}

a:hover {
  text-decoration-color: var(--np-ink);
}

:focus-visible {
  outline: 2px solid var(--np-foco);
  outline-offset: 3px;
  border-radius: var(--np-raio);
}

/* ── O topo ─────────────────────────────────────────────────────────── */

.topo {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: 24px 16px 0;
}

.topo a {
  display: inline-block;
}

.wordmark {
  display: block;
  height: 28px;
  width: auto;
  fill: var(--np-ink);
}

/* ── O conteúdo ─────────────────────────────────────────────────────── */

.conteudo {
  flex: 1;
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 16px 64px;
}

.abertura {
  padding-top: 48px;
  text-align: center;
}

.etiqueta {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--np-border-forte);
  border-radius: 999px;
  background: var(--np-surface-2);
  color: var(--np-ink-2);
  font-size: var(--np-tamanho-base);
  font-weight: 600;
  letter-spacing: 0.01em;
}

h1 {
  max-width: 48rem;
  margin: 24px auto 0;
  font-size: var(--np-tamanho-site-titulo);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.entrada {
  max-width: 40rem;
  margin: 20px auto 0;
  color: var(--np-ink-2);
  font-size: var(--np-tamanho-site-entrada);
  text-wrap: pretty;
}

/* ── Os produtos ────────────────────────────────────────────────────── */

.produtos {
  display: grid;
  gap: 16px;
  margin-top: 48px;
}

.produto {
  padding: 24px;
  border: 1px solid var(--np-border);
  border-top: 3px solid var(--cor-do-produto);
  border-radius: var(--np-raio-cartao);
  background: var(--np-surface-2);
}

.produto-cost {
  --cor-do-produto: var(--np-produto-cost);
}

.produto-plan {
  --cor-do-produto: var(--np-produto-plan);
}

.produto-cabeca {
  display: flex;
  align-items: center;
  gap: 12px;
}

.produto h2 {
  font-size: var(--np-tamanho-titulo);
  font-weight: 600;
  line-height: 1.3;
}

.categoria {
  color: var(--np-ink-2);
  font-size: var(--np-tamanho-base);
}

.icone {
  flex: none;
  width: 40px;
  height: 40px;
}

/* O «N» com as cores do pacote de marca, que não mudam com o tema (D-28). */
.icone-fundo {
  fill: var(--np-marca);
  stroke: var(--np-border-forte);
  stroke-width: 2;
}

.icone-barra {
  fill: var(--np-marca-tinta);
}

.icone-cost {
  fill: var(--np-marca-azul);
}

.icone-plan {
  fill: var(--np-marca-verde);
}

.produto-titulo {
  margin-top: 16px;
  font-weight: 600;
  text-wrap: pretty;
}

.pontos {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 0;
  list-style: none;
  color: var(--np-ink-2);
}

.pontos li {
  position: relative;
  padding-left: 18px;
}

/* A marca de cada ponto na cor do produto: forma, não texto (D-28). */
.pontos li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--cor-do-produto);
}

.nota {
  max-width: 40rem;
  margin: 32px auto 0;
  color: var(--np-ink-2);
  text-align: center;
  text-wrap: pretty;
}

/* ── O contacto ─────────────────────────────────────────────────────── */

.contacto {
  margin-top: 56px;
  text-align: center;
}

.contacto h2 {
  font-size: var(--np-tamanho-site-subtitulo);
  font-weight: 600;
  line-height: 1.25;
}

.contacto p {
  margin-top: 8px;
  color: var(--np-ink-2);
}

.contacto p + p {
  margin-top: 20px;
}

/* A ação principal, no acento da casa (D-25). */
.botao {
  display: inline-block;
  max-width: 100%;
  padding: 12px 20px;
  border-radius: var(--np-raio-cartao);
  background: var(--np-accent);
  color: var(--np-accent-texto);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background var(--np-duracao-rapida) var(--np-curva);
}

.botao:hover {
  background: var(--np-accent-strong);
}

/* ── O rodapé ───────────────────────────────────────────────────────── */

.rodape {
  border-top: 1px solid var(--np-border);
  background: var(--np-surface-2);
  color: var(--np-ink-2);
  font-size: var(--np-tamanho-secao);
}

.rodape-interior {
  max-width: 64rem;
  margin: 0 auto;
  padding: 32px 16px 40px;
}

.rodape h2 {
  margin-bottom: 8px;
  color: var(--np-ink);
  font-size: var(--np-tamanho-secao);
  font-weight: 600;
}

.rodape p {
  max-width: 44rem;
}

/* ── Larguras ───────────────────────────────────────────────────────── */

@media (min-width: 640px) {
  .topo {
    padding: 32px 24px 0;
  }

  .conteudo {
    padding: 0 24px 80px;
  }

  .rodape-interior {
    padding: 40px 24px 48px;
  }
}

@media (min-width: 720px) {
  .abertura {
    padding-top: 80px;
  }

  h1 {
    font-size: var(--np-tamanho-site-destaque);
  }

  .produtos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 64px;
  }
}

@media (min-width: 1024px) {
  h1 {
    font-size: var(--np-tamanho-site-hero);
  }
}