/* =====================================================================
   ASTRIA — tokens da marca, v3.

   Fonte única de verdade em código para o Manual da Marca v3
   (marca/Astria-Manual-da-Marca-v3.html). Nenhum arquivo de produto
   declara cor, fonte ou raio: todos consomem daqui.

   Quatro regras que o manual repete e que este arquivo torna difíceis
   de quebrar por acidente:

     Ação é violeta.   Botão, link, foco, seleção. Texto sempre branco.
     Ouro é marca.     Símbolo e destaque tipográfico. Nunca botão,
                       nunca link, nunca estado, nunca área grande.
     Ciano é dado.     Estado ativo, número em painel, gráfico.
     Gradiente é fio.  Máximo 4 px, uma ocorrência por peça, no topo
                       ou na borda. Fora de fundo, capa, ícone e botão.

   Onde o produto precisou divergir do manual, a divergência está
   declarada em marca/MARCA.md — não improvisada aqui.
   ===================================================================== */

:root {
  /* ------------------------------------------------------------ fontes
     Gloock nunca abaixo de 28 px: a serifa de contraste alto some em
     título de cartão e linha de tabela. Por isso existe --fonte-titulo
     separada de --fonte-display: h1 de capa usa display, h3 de cartão
     não. Newsreader não entra em interface em nenhuma hipótese. */
  --fonte-display: Gloock, Georgia, "Times New Roman", serif;
  --fonte-titulo: "Familjen Grotesk", Helvetica, Arial, sans-serif;
  --fonte-texto: "Familjen Grotesk", Helvetica, Arial, sans-serif;
  --fonte-enfase: Newsreader, Georgia, serif;
  --fonte-mono: "JetBrains Mono", Consolas, ui-monospace, monospace;

  --display-min: 28px;   /* piso do Gloock, declarado para consulta */
  --rotulo-min: 12px;    /* piso do rótulo em caixa alta na web */

  /* -------------------------------------------------- superfícies (escuro)
     Quatro degraus. Base é azul-noite, nunca preto puro. */
  --fundo: #0b1026;        /* Noite   — base de tudo */
  --superficie: #151c3b;   /* Órbita  — cartão */
  --superficie-2: #1e2650; /* Órbita alta — campo, hover */
  --superficie-3: #1e2650;
  --borda: #2e3873;
  --borda-forte: #3c4a92;
  --borda-viva: #5563b8;

  /* ------------------------------------------------------------- tinta */
  --tinta: #f4f4f5;
  --tinta-media: #b6b6be;
  --tinta-fraca: #b6b6be;
  --tinta-tenue: #9a9aa3;

  /* -------------------------------------------------------------- ação
     Uma cor de clique. Texto branco por cima, nos dois temas.
     #8b6cff com branco reprova em contraste e está proibido como
     cor de ação — ele só existe dentro do gradiente. */
  --acao: #7c5cff;
  --acao-clara: #6c4be0;   /* mesma função em fundo claro */
  --acao-hover: #6b49f5;
  --acao-tinta: #ffffff;

  /* -------------------------------------------------------------- marca */
  --ouro: #ffd166;         /* símbolo e destaque tipográfico */
  --ouro-escuro: #e0a32a;  /* mesma função em fundo claro */

  /* --------------------------------------------------------- dado/estado */
  --ciano: #3fd2c7;

  --sucesso: #34d399;      --sucesso-claro: #0e8f5b;
  --atencao: #ffb84d;      --atencao-claro: #b4610a;
  --erro: #ff6b7f;         --erro-claro: #c4283c;
  --neutro: #9a9aa3;       --neutro-claro: #6b6b74;

  /* Nomes antigos do portal, remapeados para os estados da v3. Existem
     só para não quebrar CSS já escrito — código novo usa os de cima. */
  --verde: var(--sucesso);
  --ambar: var(--atencao);
  --vermelho: var(--erro);

  /* ---------------------------------------------------------- gradiente
     Declarado como fio. Quem aplicar isto em fundo, botão ou ícone está
     quebrando o manual — use --fio-marca, que já vem com a espessura. */
  --grad-marca: linear-gradient(105deg, #8b6cff, #3fd2c7);
  --fio-espessura: 4px;

  /* -------------------------------------------------------------- raios
     7 px campo e botão · 10 px cartão · 999 px selo. */
  --r-campo: 7px;
  --r-botao: 7px;
  --r-cartao: 10px;
  --r-selo: 999px;

  /* Aliases do portal, realinhados aos quatro raios da v3. */
  --r-sm: 7px;
  --r-md: 7px;
  --r-lg: 10px;
  --r-xl: 10px;
  --r-pill: 999px;

  /* --------------------------------------------------------------- toque */
  --toque-min: 44px;

  /* -------------------------------------------------------------- medida */
  --largura: 1220px;
  --largura-leitura: 760px;
}

/* =====================================================================
   Tema claro. O manual proíbe inversão automática: os dois temas têm
   equivalentes declarados e nunca se misturam na mesma peça. Por isso
   isto é seleção explícita — classe ou atributo —, nunca
   @media (prefers-color-scheme).

   Duas formas de acionar, mesma paleta:
     .tema-claro            peça que nasce clara
     [data-tema="claro"]    troca feita pelo leitor, gravada no navegador
   ===================================================================== */

.tema-claro,
[data-tema="claro"] {
  --fundo: #f7f6fb;        /* Névoa */
  --superficie: #ffffff;   /* Papel */
  --superficie-2: #edecf2; /* campo */
  --superficie-3: #edecf2;
  --borda: #dcdcdf;
  --borda-forte: #c4c4c9;
  --borda-viva: #9a9aa3;

  --tinta: #0b1026;
  --tinta-media: #3a3a40;
  --tinta-fraca: #3a3a40;
  --tinta-tenue: #6b6b74;

  --acao: var(--acao-clara);
  --acao-hover: #5a3dc4;
  --ouro: var(--ouro-escuro);

  --sucesso: var(--sucesso-claro);
  --atencao: var(--atencao-claro);
  --erro: var(--erro-claro);
  --neutro: var(--neutro-claro);
}

/* =====================================================================
   Primitivas da marca. São as peças que o manual desenha nas páginas
   07 e 08 — implementadas uma vez aqui para não serem reinventadas
   com valores ligeiramente diferentes em cada tela.
   ===================================================================== */

/* O fio de marca: a única aplicação permitida do gradiente.
   Uma ocorrência por peça, no topo ou na borda. */
.fio-marca {
  height: var(--fio-espessura);
  border-radius: calc(var(--fio-espessura) / 2);
  background: var(--grad-marca);
}
.fio-marca--topo::before {
  content: "";
  display: block;
  height: var(--fio-espessura);
  background: var(--grad-marca);
}

/* Rótulo: caixa alta, 0.2em, mínimo 12 px, em Familjen — não em
   monoespaçada. A monoespaçada da v3 é só para comando, chave e código. */
.rotulo {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: var(--rotulo-min);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}

/* Código: comando, chave, SKU, código de erro. */
.codigo {
  font-family: var(--fonte-mono);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}

/* Número de produto: preço, métrica, execução. Tabular, para alinhar
   em coluna. Nunca em Gloock. */
.numero {
  font-family: var(--fonte-titulo);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Ênfase: uma expressão por peça, só dentro de título, zero na interface. */
.enfase {
  font-family: var(--fonte-enfase);
  font-style: italic;
  font-weight: 400;
}

/* Selo de estado: sempre ponto + palavra, nunca cor sozinha — quem não
   distingue matiz precisa ler o rótulo. O fundo do selo é a superfície
   de baixo, nunca o próprio estado. */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--r-selo);
  padding: 6px 12px;
  font-family: var(--fonte-titulo);
  font-size: var(--rotulo-min);
  font-weight: 600;
  color: var(--neutro);
  white-space: nowrap;
}
.selo::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.selo--rodando { color: var(--sucesso); }
.selo--revisar { color: var(--atencao); }
.selo--falhou  { color: var(--erro); }
.selo--pausado { color: var(--neutro); }