/*
 * design.css — o Design Language do GFT Next
 * (CARD-PRODUCT-DESIGN-002).
 *
 * 🎯 **UMA linguagem, dois documentos.** O Portal e o módulo GFT
 * carregam este arquivo antes das folhas deles. Tudo o que é
 * **identidade** — cor, tipografia, ritmo, raio, sombra, estado — mora
 * aqui; o que é **layout** continua em `portal.css` e `style.css`.
 *
 * ⚖️ **A base é o MÓDULO, e isso não é escolha minha.** A **DEC-032**
 * decidiu *"sistema de design único, o módulo é a base"*. A paleta e as
 * fontes abaixo **vieram do `style.css`**, onde já existiam e já eram
 * coerentes; o Portal é que não tinha linguagem nenhuma — rodava em
 * `system-ui` com as cores padrão do navegador.
 *
 * ⚠️ **A DEC-032 está 🟡 AGUARDANDO RATIFICAÇÃO.** Este arquivo a executa
 * na prática. Se a ratificação eleger outra base, **muda este arquivo e
 * mais nada** — é justamente para isso que ele é um lugar só.
 *
 * ♻️ Mesmo caminho do `canvas.css` e do `recommendation-view.css`: raiz
 * do repositório, publicado nos dois diretórios pelo `build-static.sh`,
 * servido aos dois pelo dev-server.
 */

:root {
  color-scheme: dark;

  /* ─────────────── superfícies e bordas ─────────────── */
  --bg: #09090b;
  --bg-inset: #0c0c0f;
  --surface: #131316;
  --surface-inset: rgba(12, 12, 15, 0.6);
  --border-subtle: #1c1c21;
  --border: #232328;
  --border-strong: #26262b;

  /* ─────────────── texto ─────────────── */
  --text-primary: #fafafa;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --text-faint: #52525b;

  /* ─────────────── acentos ─────────────── */
  --blue: #3b82f6;
  --blue-light: #7da2ff;
  --blue-lighter: #93b4fd;
  --purple: #8b5cf6;
  --purple-light: #a78bfa;
  --green: #4ade80;
  --amber: #fbbf24;
  --red: #f87171;
  --red-light: #fca5a5;

  /*
   * ═══════════ A CAMADA SEMÂNTICA DA COR ═══════════
   * CARD-0157.
   *
   * 🚨 **As superfícies e o texto já eram semânticos** (`--surface`,
   * `--text-primary`, `--border`) — **os acentos não**: `--blue` diz o
   * que a cor **É**, e nada sobre o que ela **significa**. Um dia em que
   * "primária" deixar de ser azul, `--blue: #8b5cf6` seria uma mentira
   * escrita no lugar mais visível do sistema.
   *
   * ⚖️ **Esta camada não muda nenhum valor** — ela dá NOME a papéis que
   * já existiam de fato. Depois dela, trocar identidade é editar estas
   * dezesseis linhas; antes, era caçar `--blue` pelo produto inteiro.
   *
   * 🔒 As de baixo (`--blue`, `--green`…) passam a ser **implementação**:
   * ninguém as consome direto fora deste arquivo.
   */
  --cor-fundo: var(--bg);
  --cor-superficie: var(--surface);
  --cor-superficie-elevada: var(--bg-inset);
  --cor-borda: var(--border);
  --cor-borda-sutil: var(--border-subtle);
  --cor-borda-forte: var(--border-strong);

  --cor-texto: var(--text-primary);
  --cor-texto-secundario: var(--text-secondary);
  --cor-texto-auxiliar: var(--text-muted);
  --cor-texto-tenue: var(--text-faint);

  --cor-primaria: var(--blue);
  --cor-primaria-hover: var(--blue-light);
  --cor-sucesso: var(--green);
  --cor-atencao: var(--amber);
  --cor-erro: var(--red);
  --cor-informacao: var(--blue);
  --cor-foco: var(--blue);
  --cor-desabilitada: var(--text-faint);

  /*
   * ─────── as variantes que o MÓDULO consome (CARD-0164) ───────
   *
   * 🎯 O `style.css` usava `--blue-light`, `--blue-lighter` e
   * `--red-light` **direto** — nomes de cor, não de papel. Estes três
   * papéis existiam de fato nas seis ferramentas e não tinham nome.
   */
  --cor-primaria-clara: var(--blue-light);
  --cor-primaria-realce: var(--blue-lighter);
  --cor-erro-clara: var(--red-light);

  /* ─────────────── fontes ─────────────── */
  --font-label: 'Geist', system-ui, sans-serif;
  --font-body: 'Geist', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;

  /*
   * ─────────────── ESCALA TIPOGRÁFICA ───────────────
   *
   * ⚖️ **Seis degraus, e nenhum a mais.** Uma escala com dez degraus
   * vira dez decisões por tela, e a décima nunca é tomada — é copiada.
   * A razão é ~1.125 (segunda maior), que é a que mantém legível a faixa
   * de 12 a 20 px onde este produto inteiro vive.
   */
  --texto-xs: 0.6875rem;   /* 11px — rótulo de categoria, selo */
  --texto-sm: 0.75rem;     /* 12px — legenda, dica */
  --texto-md: 0.8125rem;   /* 13px — corpo da interface */
  --texto-lg: 0.875rem;    /* 14px — corpo de leitura */
  --texto-xl: 1rem;        /* 16px — título de seção */
  --texto-2xl: 1.25rem;    /* 20px — título de tela */

  /*
   * ─────────── OS SETE PAPÉIS TIPOGRÁFICOS DA MOLDURA ───────────
   *
   * 🏷️ **A escala acima diz TAMANHO; estes dizem FUNÇÃO.** Quem escreve
   * uma tela nova não escolhe entre seis degraus — escolhe o papel, e o
   * degrau vem junto. É o que impede a sétima decisão de ser um
   * `0.9rem` novo.
   *
   * ⚖️ **Sete, e todos apontam para a escala** — nenhum valor próprio.
   * Um papel que precisasse de tamanho fora dela seria sinal de que a
   * escala está errada, não de que falta um degrau.
   */
  --tipo-titulo-workspace: var(--texto-xl);      /* nome da ferramenta */
  --tipo-descricao-ferramenta: var(--texto-md);  /* a linha sob o nome */
  --tipo-categoria-nav: var(--texto-xs);         /* GAMEPLAY, PLANNING… */
  --tipo-item-nav: var(--texto-md);              /* Farm, Herói, Aldeias */
  --tipo-sessao: var(--texto-md);                /* servidor, idioma, conta */
  --tipo-auxiliar: var(--texto-sm);              /* dica, nota de apoio */
  --tipo-legenda: var(--texto-xs);               /* rótulo miúdo, selo */

  /* ─────────────── pesos ─────────────── */
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-forte: 600;
  --peso-marca: 700;

  /*
   * ─────────────── ALTURAS DE LINHA ───────────────
   *
   * 📐 Três, ligadas ao PAPEL do texto e não ao tamanho dele: número não
   * respira, interface respira pouco, prosa respira.
   */
  --linha-densa: 1.2;      /* números, selos, rótulos curtos */
  --linha-interface: 1.4;  /* controles, listas, tabelas */
  --linha-prosa: 1.6;      /* parágrafos de leitura */

  /*
   * ─────────────── ESPAÇAMENTO-BASE ───────────────
   *
   * 🔢 **Base 4 px.** Todo espaço do produto é múltiplo dela — é o que
   * faz duas telas escritas por pessoas diferentes parecerem a mesma.
   */
  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 24px;
  --espaco-6: 32px;
  --espaco-7: 48px;

  /* ─────────────── raios ─────────────── */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /*
   * ─────────────── SOMBRAS ───────────────
   *
   * 🌑 **Duas, e as duas são discretas.** Num tema escuro a sombra não
   * separa por escuridão — separa por CONTRASTE de borda. Sombra pesada
   * aqui vira mancha, não profundidade.
   */
  --sombra-flutuante: 0 4px 16px rgba(0, 0, 0, 0.45);
  --sombra-modal: 0 16px 48px rgba(0, 0, 0, 0.6);

  /*
   * ─────────────── ELEVAÇÃO ───────────────
   *
   * 🏔️ **Três níveis, e num tema escuro quem eleva é a BORDA, não a
   * sombra.** Elevar por escuridão exigiria escurecer o que já é
   * `#09090b`; então o degrau é de contraste de superfície e de borda.
   *
   * 📌 Nomeados pelo PAPEL, e não pelo número: `elevacao-2` não diz
   * nada, `--nivel-flutuante` diz onde o elemento vive.
   */
  /* 🚨 A PROFUNDIDADE ESTAVA INVERTIDA (CARD-0158).
     Medido: Sidebar com luminância **12,2** e o trabalho com **9,1** —
     a moldura AVANÇAVA e o conteúdo RECUAVA, o oposto do que o
     CARD-0144 declarou. E o Canvas não tinha plano nenhum: era
     transparente sobre o `body`.

     ⚖️ Num tema quase preto não dá para "elevar" o trabalho clareando
     muito sem virar tema claro. Então **a moldura desce**: nasce um
     plano ABAIXO do de trabalho, e o módulo (`--bg`) passa a ser o
     mais claro da tela — que é onde o olho deve pousar. */
  --nivel-moldura: #050507;
  --nivel-base: var(--bg);
  --nivel-conteudo: var(--surface);
  --nivel-flutuante: var(--surface);

  /*
   * ─────────────── LARGURA MÁXIMA DOS BLOCOS ───────────────
   *
   * 📖 **68 caracteres para prosa** — acima disso o olho perde a linha
   * ao voltar. **1600 px para superfície de trabalho**, que é o teto de
   * ultrawide que o Portal já media.
   */
  --largura-prosa: 68ch;
  --largura-trabalho: 1600px;

  /*
   * ─────────────── MEDIDAS ESTRUTURAIS DA MOLDURA ───────────────
   *
   * 🏷️ **Nomeados pelo PAPEL, nunca pela implementação.** `--gap-16` diz
   * o que o valor É; `--workspace-gap` diz **para que ele serve** — e
   * quando o valor mudar, só o segundo continua verdadeiro.
   *
   * 🎯 São a fronteira entre "linguagem" e "layout": quem monta uma tela
   * nova consome estes, e não descobre 200 px lendo o CSS da Sidebar.
   */
  --sidebar-largura: 200px;
  --shell-header-altura: 36px;
  --alvo-toque: 44px;

  /* Tetos de rolagem — percentagem onde há altura definida, `vh` onde
     não há (ver `canvas.css` sobre a diferença). */
  --resultado-altura-max: 45%;
  --avancada-altura-max: 40vh;

  /*
   * ─────────────── ESTADOS ───────────────
   *
   * 🎯 **São TOKENS, e não receitas soltas.** Antes deste Card cada
   * hover do Portal era um `color-mix(currentColor 8%)` escrito à mão —
   * seis lugares, seis valores parecidos, nenhum igual.
   */
  --estado-hover: color-mix(in srgb, var(--text-primary) 8%, transparent);
  --estado-ativo: color-mix(in srgb, var(--text-primary) 12%, transparent);
  --estado-pressionado: color-mix(in srgb, var(--text-primary) 16%, transparent);
  --foco-anel: 2px;
  --foco-cor: var(--cor-foco);
  --desabilitado-opacidade: 0.45;
}

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

/*
 * ═══════════════ FOCO — a regra mais importante deste arquivo ═══════════════
 *
 * 🚨 **`:focus-visible`, e não `:focus`.** O segundo acende ao clique do
 * mouse também, e o anel piscando a cada clique ensina a equipe a
 * removê-lo — que é como um produto perde a navegação por teclado.
 *
 * ⚖️ **Um anel só, para tudo.** Botão, campo, link e item de navegação
 * usam o mesmo — porque quem navega por teclado precisa reconhecer o
 * foco, não interpretá-lo.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--foco-anel) solid var(--foco-cor);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ═══════════════ CONTROLES — a língua comum ═══════════════ */

/*
 * ⚖️ `:where()` mantém a especificidade em ZERO: estas regras dão a
 * língua-mãe, e qualquer classe das folhas de cada documento a sobrepõe
 * sem precisar de `!important` nem de seletor inflado.
 */
:where(button, input, select, textarea) {
  font-family: inherit;
  font-size: var(--texto-md);
  line-height: var(--linha-interface);
  color: var(--text-primary);
}

:where(input, select, textarea) {
  padding: var(--espaco-2) var(--espaco-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-inset);
}

:where(input, select, textarea):hover:not(:disabled) {
  border-color: var(--border-strong);
}

:where(input, select, textarea):focus-visible {
  border-color: var(--foco-cor);
}

:where(textarea) {
  line-height: var(--linha-prosa);
  resize: vertical;
}

:where(button) {
  padding: var(--espaco-2) var(--espaco-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-weight: var(--peso-medio);
  cursor: pointer;
}

:where(button):hover:not(:disabled) {
  background: var(--estado-hover);
  border-color: var(--border-strong);
}

:where(button):active:not(:disabled) {
  background: var(--estado-pressionado);
}

/*
 * 🚨 **O desabilitado é UMA regra, para todo controle.**
 *
 * ⚠️ O `CARD-PRODUCT-LAUNCH-004` descobriu que o projeto **não tinha
 * nenhuma**: `multiCalcBtn` e `rainbowExecutarBtn` nasciam desabilitados
 * com opacidade 1 e cursor de mão — pareciam clicáveis e não respondiam
 * nada. É o **UX-04** do KB-204, e aqui ele vale para o produto inteiro.
 */
:where(button, input, select, textarea):disabled {
  opacity: var(--desabilitado-opacidade);
  cursor: not-allowed;
}

/* ═══════════ AS TRÊS VARIANTES DE BOTÃO ═══════════
   CARD-0156.

   🚨 MEDIDO: as três divergiam em TUDO o que não as distingue.
   `.botao-principal` e `.botao-secundario` usavam `border-radius:
   0.3rem` (4,8 px) — **um terceiro raio**, contra os 8 px do
   `--radius-sm` — e padding `0.6rem 1.2rem` (9,6 × 19,2 px), fora de
   qualquer escala. O `.botao-discreto` usava `0.85rem` (13,6 px), fora
   da escala tipográfica.

   ⚖️ **O que as distingue é PRESENÇA, e só isso deve variar:** o
   primário tem preenchimento, o secundário tem borda, o fantasma não
   tem nenhum dos dois. Raio, espessura, ritmo e estados são **o mesmo
   para os três** — e vêm do `:where(button)` acima. */

.botao-principal,
.botao-secundario,
.botao-discreto {
  padding: var(--espaco-2) var(--espaco-4);
  border-radius: var(--radius-sm);
  font-size: var(--texto-md);
  line-height: var(--linha-interface);
}

.botao-principal {
  border: 1px solid var(--border-strong);
  background: var(--estado-ativo);
  font-weight: var(--peso-forte);
  color: var(--text-primary);
}

.botao-secundario {
  border: 1px solid var(--border);
  background: none;
  font-weight: var(--peso-medio);
  color: var(--text-secondary);
}

/* 👻 O fantasma não tem moldura nem fundo — só o hover o revela. */
.botao-discreto {
  padding: var(--espaco-1) var(--espaco-2);
  border: 1px solid transparent;
  background: none;
  font-weight: var(--peso-medio);
  color: var(--text-secondary);
}

.botao-principal:hover:not(:disabled),
.botao-secundario:hover:not(:disabled),
.botao-discreto:hover:not(:disabled) {
  background: var(--estado-hover);
  color: var(--text-primary);
}

.botao-principal:active:not(:disabled),
.botao-secundario:active:not(:disabled),
.botao-discreto:active:not(:disabled) {
  background: var(--estado-pressionado);
}

/* ═══════════ ESTADO VAZIO ═══════════

   ⚖️ Um estado vazio NÃO é uma mensagem de erro: ele nomeia um lugar
   que ainda não tem conteúdo. Tracejado, centrado e apagado — a mesma
   língua que o marco de resultado do Canvas já falava. */
:where(.estado-vazio) {
  padding: var(--espaco-5) var(--espaco-4);
  border: 1px dashed color-mix(in srgb, currentColor 28%, transparent);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: var(--texto-md);
  text-align: center;
}

/* ═══════════ DIVISOR ═══════════

   ⛔ Uma linha, e nunca uma sombra: num tema escuro quem separa é a
   borda (ver a nota de elevação no topo). */
:where(hr, .divisor) {
  height: 0;
  margin: var(--espaco-4) 0;
  border: 0;
  border-top: 1px solid var(--border-subtle);
}

/* ═══════════════ SUPERFÍCIES DE CONTEÚDO ═══════════════ */

/*
 * 📦 Um cartão é **superfície + borda + raio**, e nada mais. Sem sombra:
 * num tema escuro ela vira mancha. Quem separa é a borda.
 */
:where(.cartao) {
  padding: var(--espaco-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface);
}

/*
 * ═══════════════ MENSAGENS, ALERTAS, SELOS ═══════════════
 *
 * 🎨 **A cor é o único eixo que muda entre eles**, e por isso a variante
 * é uma variável, não uma regra nova. Cinco tons de aviso escritos à mão
 * viram cinco tons ligeiramente diferentes na terceira tela.
 */
:where(.mensagem) {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-2);
  padding: var(--espaco-3);
  border: 1px solid color-mix(in srgb, var(--tom, var(--border)) 40%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--tom, var(--surface)) 10%, transparent);
  font-size: var(--texto-md);
  line-height: var(--linha-interface);
}

:where(.mensagem--info) { --tom: var(--cor-informacao); }
:where(.mensagem--ok) { --tom: var(--cor-sucesso); }
:where(.mensagem--atencao) { --tom: var(--cor-atencao); }
:where(.mensagem--erro) { --tom: var(--cor-erro); }

/*
 * 🏷️ **Selo e etiqueta são o mesmo componente com raio diferente**, e
 * dizê-lo aqui evita as duas escalas de miudeza que sempre nascem.
 */
:where(.etiqueta, .selo) {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  padding: 2px var(--espaco-2);
  border: 1px solid color-mix(in srgb, var(--tom, var(--border)) 45%, transparent);
  color: var(--tom, var(--text-secondary));
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  line-height: var(--linha-densa);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

:where(.etiqueta) { border-radius: var(--radius-sm); }
:where(.selo) { border-radius: var(--radius-pill); }