@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&family=Instrument+Serif:ital@0;1&display=swap');

/**
 * Atlas One — Design Tokens
 * ------------------------------------------------
 * Fonte única de verdade de cor, tipografia, espaçamento, grid,
 * radius, sombra e estados. Nenhuma tela deve declarar esses
 * valores soltos no próprio <style> — sempre var(--atlas-*).
 *
 * Identidade Dark Premium (Nova Identidade Visual Oficial) — preto
 * profundo, grafite, dourado, branco quente. Identidade ÚNICA: não
 * existe mais alternância clara/escura — este :root é a única fonte,
 * sem @media(prefers-color-scheme) nem [data-theme] de propósito.
 *
 * Como usar numa página nova:
 *   <link rel="stylesheet" href="/design-system/tokens.css">
 */

:root{
  /* ---------- Escala neutra — 50 (fundo) a 900 (texto) ----------
     THRUST OS: a escala volta a ser tingida de AZUL (matiz ~275),
     ancorada nos três hexes do briefing -- --bg-app #050508 no degrau 50,
     --bg-card #0F111A no 200 e --border-ui #1E2235 no 300. Os degraus
     intermediários seguem a mesma forma de escada de antes, só
     re-ancorada.

     NOTA de histórico, para ninguém "corrigir" isto de volta sem
     contexto: uma fase anterior migrou esta escala DE azulada PARA
     quente de propósito, porque o azul competia com o dourado da marca.
     Com a marca em COBRE e o dado em CIANO, o azul-noturno deixa de
     competir e passa a ser o chão certo -- a decisão foi revertida com
     conhecimento de causa, não por engano.

     O degrau 700 é #7D8CA6 e NÃO o #64748B do briefing: medido, o
     #64748B dava 3,96:1 sobre o card, abaixo do mínimo AA de 4,5:1 para
     texto pequeno. #7D8CA6 dá 5,54:1 mantendo a mesma leitura de slate. */
  --atlas-tinta-50:#050508;   /* --bg-app do briefing */
  --atlas-tinta-100:#090A11;
  --atlas-tinta-200:#0F111A;  /* --bg-card do briefing */
  --atlas-tinta-300:#1E2235;  /* --border-ui do briefing */
  --atlas-tinta-400:#35394C;
  --atlas-tinta-500:#6B6F81;
  --atlas-tinta-600:#8E91A0;
  --atlas-tinta-700:#7D8CA6;  /* texto secundário -- 5,54:1 no card (o #64748B do briefing dava 3,96:1, reprovava AA) */
  --atlas-tinta-800:#D5D7E0;
  --atlas-tinta-900:#FFFFFF;  /* --text-main do briefing */

  /* ---------- Slot de MARCA — Cobre Líquido ----------
     Escala funcional (não numérica): cada degrau tem papel de uso
     definido, nunca hex solto espalhado pelo código.

     HISTÓRICO DE COLISÃO, que esta paleta finalmente resolve: o dourado
     anterior ficava a 26,7° de matiz da cor de ATENÇÃO, e os dois
     aparecem lado a lado no Grow (botão de ação junto de chip de alerta
     de CPA). Uma tentativa de resolver movendo a MARCA (champanhe)
     falhou -- croma .056 não lê como cor em tela densa, tudo virou
     creme. Aqui o problema é resolvido movendo as SEMÂNTICAS: atenção
     saiu do laranja para o âmbar e erro foi puxado para o magenta.

     Menor distância entre duas cores com significado:
        antes  26,7°  (marca x atenção)
        agora  32,5°  (marca x erro)

     Texto sobre a ação primária é a tinta escura #050508 (5,48:1).
     Branco sobre o cobre dá 3,72:1 e reprova -- nunca usar. */
  --atlas-gold:#E25822;          /* Base -- ação primária (--color-accent: Cobre Líquido) */
  --atlas-gold-hover:#F4783F;    /* Hover */
  --atlas-gold-active:#B8410F;   /* Pressed/active */
  --atlas-gold-soft:#2A1109;     /* Fundo suave (badges, pills, hover sutil) */
  --atlas-gold-muted:#9C5230;    /* Toques de marca discretos */
  --atlas-gold-border:color-mix(in srgb,var(--atlas-gold) 45%,var(--atlas-border)); /* Borda com presença de marca sem virar botão */
  --atlas-gold-glow:color-mix(in srgb,var(--atlas-gold) 30%,transparent); /* Sombra/glow -- já era usado inline em vários pontos, agora é 1 token */
  /* PREENCHIMENTO DA AÇÃO, separado da cor de marca.
     O briefing pede texto BRANCO no botão "para alto contraste" -- mas
     branco sobre o cobre especificado (#E25822) dá 3,72:1 e REPROVA o
     mínimo AA de 4,5:1 para texto. Ou seja: a instrução literal entrega o
     oposto da intenção declarada.
     Solução cirúrgica: #E25822 continua sendo A COR DE MARCA em tudo que
     é visto como marca (bordas, realces, pílula, acento da sidebar); só o
     PREENCHIMENTO do botão desce para um cobre mais fundo, onde o branco
     chega a 4,96:1. A diferença entre os dois é imperceptível lado a
     lado; a diferença de legibilidade dentro do botão não é. */
  --atlas-acao-preenchimento:#C64412;
  --atlas-acao-texto:#FFFFFF;
  /* -deep era pensado pra texto legível sobre fundo CLARO (tema antigo,
     removido) — usado em ~15 telas como cor de texto sobre fundo escuro,
     então precisa ser o dourado mais claro/legível, não o mais escuro,
     senão vira texto escuro sobre fundo escuro (ilegível). */
  /* CALIBRAGEM (achado visual real): o champanhe claro demais (#F2E2C1,
     L .917) ficava a só 0,053 de luminosidade do texto branco -- o acento
     do título e o texto de marca praticamente sumiam dentro do texto
     normal. Rebaixado pra L .871: separa 2x mais do branco, mantém 13,1:1
     de contraste no fundo e continua a 33,6° do laranja de atenção. */
  --atlas-gold-deep:#FF8A55;     /* Cobre para TEXTO sobre escuro -- 8,09:1 no card */

  /* Ivory / warm white -- ver Art. 6 do Brand System: NÃO substitui
     --atlas-text (usado em toda parte, contraste já correto) -- é um
     tom quente reservado pra headlines/momentos de marca, emparelhado
     com --atlas-font-brand (serif), nunca pro corpo de texto geral. */
  --atlas-ivory:#F4EFE4;

  --atlas-route:#00F0FF;         /* --color-data: Ciano Laser. Dados, ROAS, gráficos, inteligência */
  --atlas-route-hover:#6BF7FF;
  --atlas-route-soft:#052A31;

  --atlas-olive:#35D58A;         /* Território validado — sucesso, variação positiva */
  --atlas-olive-soft:#0D2C25;

  /* Ajustado (era #F3A84A, perigosamente próximo do Atlas Gold #E4AA43 --
     confundia "isto é um aviso" com "isto é a marca"). Mais laranja,
     menos dourado -- precisa continuar claramente distinto do brand. */
  --atlas-ocre:#FFC24B;          /* Atenção -- movido do laranja pro âmbar: 41,3° do cobre (era 12,3°) */
  --atlas-ocre-soft:#332714;

  --atlas-danger:#FF2D78;        /* Rota bloqueada — erro. Puxado pro magenta: 32,5° do cobre (era 23,1°) */
  --atlas-danger-soft:#350F22;

  /* Mantido como token (pode haver uso pontual legítimo), mas deixou de
     ser a linguagem PADRÃO de "Atlas pensando/gerando" -- ver Art. 14:
     isso agora é Atlas Gold (componentes.css: .ia-step, .atlas-copilot). */
  --atlas-ai:#A970FF;
  --atlas-ai-hover:#C49AFF;
  --atlas-ai-soft:#251743;

  --atlas-cyan:var(--atlas-route);   /* UM ciano só: antes #28D6E7 ficava a 2,6° do ciano de dado -- duas cores quase idênticas com papéis diferentes */
  --atlas-cyan-soft:var(--atlas-route-soft);

  /* ---------- Papéis semânticos (mapeiam a neutra pra uso funcional) ---------- */
  --atlas-bg:var(--atlas-tinta-50);

  /* ---------- Canvas (Fase 9 -- atmosfera da referência) ----------
     O que faz a referência parecer "viva" antes de qualquer conteúdo
     carregar: o fundo não é preto chapado, é preto tingido com uma GRADE
     fina e um GLOW radial descendo do topo. Sem isso, todo o resto (card
     em degradê, pílula, gradiente no texto) fica pousado no vazio.

     Três peças separadas de propósito: a grade é `fixed` (textura do
     aplicativo inteiro, não rola junto e por isso nunca "anda" numa
     página de 9.000px), o glow é `scroll` (pertence ao TOPO da página,
     some ao rolar -- se fosse fixed viraria uma mancha perseguindo o
     leitor), e a cor de fundo fecha a pilha por baixo.

     --atlas-bg continua sendo COR PURA e não pode virar esta pilha:
     várias telas fazem color-mix(... , var(--atlas-bg)), que quebra com
     um valor multi-camada. Por isso o canvas é um token à parte. */
  /* 7% -> 4%: a grade lia forte demais nas telas VAZIAS (login, estados
     sem dado), onde não há conteúdo competindo com ela. Não era efeito
     do champanhe -- medido, a linha a 7% dá 1,133:1 contra o fundo, e o
     ouro anterior dava 1,102:1, praticamente o mesmo. Era o nível
     absoluto que estava alto. A 4% a linha fica em 1,067:1: ainda lê
     como textura de instrumento, para de disputar com o conteúdo. */
  /* Grade tingida da própria BORDA (azul-noturno), não da cor de ação:
     uma grade cor de cobre leria como fumaça quente sobre a interface;
     em azul ela lê como grade técnica, que é a intenção cyber. */
  --atlas-canvas-grade-cor:color-mix(in srgb,var(--atlas-tinta-400) 55%,transparent);
  --atlas-canvas-grade-passo:64px;
  --atlas-canvas-grade:
    linear-gradient(to right,var(--atlas-canvas-grade-cor) 1px,transparent 1px) 0 0/var(--atlas-canvas-grade-passo) var(--atlas-canvas-grade-passo) fixed,
    linear-gradient(to bottom,var(--atlas-canvas-grade-cor) 1px,transparent 1px) 0 0/var(--atlas-canvas-grade-passo) var(--atlas-canvas-grade-passo) fixed;
  --atlas-canvas-glow:radial-gradient(1500px 760px at 50% -12%,color-mix(in srgb,var(--atlas-gold) 17%,transparent),transparent 66%);
  /* Banho de marca: na referência o fundo inteiro é tingido, não só o topo.
     Fixo e fraquíssimo -- serve pra o preto nunca ler como preto de
     terminal, mesmo 8.000px abaixo do glow. */
  --atlas-canvas-banho:linear-gradient(color-mix(in srgb,var(--atlas-gold) 3%,transparent),color-mix(in srgb,var(--atlas-gold) 3%,transparent)) 0 0/100% 100% fixed;
  --atlas-canvas:var(--atlas-canvas-glow),var(--atlas-canvas-banho),var(--atlas-canvas-grade),var(--atlas-bg);
  /* Canvas de TRABALHO: grade + banho, SEM o glow.
     O glow é um recurso de HERO -- uma mancha de luz de 1500x760 atrás de
     uma frase gigante. Atrás de uma grade de KPI ele vira névoa: reduz o
     contraste justamente no topo, onde ficam os números que a pessoa veio
     ler. A escolha foi "atmosfera em todas as telas", e esta é a parte
     dessa escolha que a tela densa reprovou -- a textura (grade + banho)
     fica em todo lugar, a luz de palco fica só na entrada
     (landing/login/onboarding). */
  --atlas-canvas-trabalho:var(--atlas-canvas-banho),var(--atlas-canvas-grade),var(--atlas-bg);
  --atlas-bg-elevated:var(--atlas-tinta-100);
  --atlas-surface:var(--atlas-tinta-100);
  --atlas-surface-2:var(--atlas-tinta-200);
  --atlas-surface-hover:var(--atlas-tinta-200);
  --atlas-surface-active:var(--atlas-tinta-300);
  --atlas-text:var(--atlas-tinta-900);
  --atlas-text-soft:var(--atlas-tinta-700);
  --atlas-text-faint:var(--atlas-tinta-500);
  --atlas-text-on-gold:var(--atlas-tinta-50); /* já usado em .atlas-btn-primary -- formalizado em token */
  --atlas-border:var(--atlas-tinta-300);
  --atlas-border-soft:var(--atlas-tinta-200);
  --atlas-border-strong:var(--atlas-tinta-400);

  /* ---------- Aliases semânticos (nomenclatura de status, sem duplicar cor) ---------- */
  --atlas-success:var(--atlas-olive);
  --atlas-warning:var(--atlas-ocre);
  --atlas-info:var(--atlas-route);
  /* --atlas-danger já nomeada acima */

  /* ---------- Tipografia — Geist conduz toda a operação; Instrument Serif aparece só em marca/conquista ---------- */
  /* FASE 9: a dupla da referência -- Space Grotesk (geométrica, com
     personalidade, tracking negativo nos títulos) conduzindo o display,
     DM Sans (neutra, ótima leitura em corpo pequeno) no texto. Geist
     saiu: era competente, mas é a sans "segura" que qualquer SaaS usa --
     exatamente a sensação de genérico que o usuário apontou. */
  --atlas-font-display:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --atlas-font-body:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --atlas-font-brand:'Instrument Serif',Georgia,'Iowan Old Style',serif;
  --atlas-font-mono:'SF Mono','JetBrains Mono',Consolas,'Courier New',monospace;

  --atlas-text-hero:52px;    --atlas-text-hero-lh:1.05;
  --atlas-text-h1:36px;      --atlas-text-h1-lh:1.1;
  --atlas-text-h2:27px;      --atlas-text-h2-lh:1.15;
  --atlas-text-h3:20px;      --atlas-text-h3-lh:1.2;
  --atlas-text-body-lg:17px; --atlas-text-body-lg-lh:1.6;
  --atlas-text-body:15px;    --atlas-text-body-lh:1.6;
  --atlas-text-body-sm:13.5px; --atlas-text-body-sm-lh:1.55;
  --atlas-text-caption:12px; --atlas-text-caption-lh:1.4;
  --atlas-text-mono-md:13px;
  --atlas-text-mono-sm:11px;

  /* ---------- FASE 9 — Linguagem de superfície (referência do usuário) ----------
     O que dá o ar premium na referência NÃO é sombra (lá não existe
     nenhuma): é (1) gradiente diagonal sutil de superfície, (2) borda
     hairline de 0.8px tingida da marca, (3) raio grande, (4) um
     gradiente de marca de 2 paradas usado em texto e botão, (5) glow
     colorido só embaixo da ação primária. Tudo declarado aqui pra
     nenhuma tela precisar reinventar a receita. */

  /* Gradiente de marca -- dourado claro -> dourado base. Usado em texto
     de destaque (background-clip:text) e no preenchimento da ação
     primária, nunca como fundo de bloco grande (viraria ouro-espelho). */
  /* Gradiente de marca: reservado para TEXTO em background-clip (headline
     com palavra em destaque), onde o fundo é escuro e o contraste é alto.
     NÃO é mais o preenchimento do botão: com texto branco por cima, a
     ponta clara de qualquer gradiente de cobre reprova AA (4,03:1). Botão
     usa --atlas-acao-preenchimento, chapado -- que é, aliás, o que o
     briefing descreve ("Botões Principais: #E25822 com texto em branco"),
     sem gradiente nenhum. */
  --atlas-gradiente-marca:linear-gradient(100deg,#F4783F,#E25822);
  /* Superfície de card: mais clara no topo-esquerda, funde no fundo da
     página embaixo-direita. É esse leve desnível que dá volume sem sombra. */
  --atlas-superficie-card:var(--atlas-tinta-200);
  --atlas-superficie-card-hover:var(--atlas-tinta-300);
  /* Hairline: 0.8px (não 1px) tingido da marca -- some no escuro, só
     desenha o contorno. */
  /* THRUST OS: o fio de 0,8px tingido de marca fazia sentido quando o card
     era um degradê macio. Nesta paleta o card é CHAPADO (#0F111A) e quem
     faz a aresta é a borda -- então ela vira linha NÍTIDA de 1px na cor de
     borda do briefing (#1E2235). Medido: ΔL 0,077 contra o card e 0,14
     contra o fundo, ou seja, a aresta lê dos dois lados. O degradê do
     briefing (card #0F111A sobre fundo #050508) daria ΔL 0,063 -- abaixo
     do limiar, e reintroduziria exatamente o "embaçado" já corrigido. */
  --atlas-hairline:1px solid var(--atlas-tinta-300);
  --atlas-hairline-forte:1px solid color-mix(in srgb,var(--atlas-gold) 45%,var(--atlas-tinta-300));
  /* Glow da ação primária -- desce, nunca circunda (offset Y positivo,
     spread negativo): parece luz refletida na mesa, não neon. */
  --atlas-glow-acao:0 10px 40px -12px var(--atlas-gold);
  --atlas-radius-card:22px;

  /* ---------- Espaçamento — base 4px ---------- */
  --atlas-space-1:4px;
  --atlas-space-2:8px;
  --atlas-space-3:12px;
  --atlas-space-4:16px;
  --atlas-space-5:24px;
  --atlas-space-6:32px;
  --atlas-space-7:48px;
  --atlas-space-8:64px;
  --atlas-space-9:96px;

  /* ---------- Grid ---------- */
  --atlas-container:1160px;
  --atlas-reading-column:720px;
  --atlas-gutter:24px;
  --atlas-bp-sm:480px;
  --atlas-bp-md:768px;
  --atlas-bp-lg:1024px;
  --atlas-bp-xl:1280px;

  /* ---------- Radius ---------- */
  --atlas-radius-sm:4px;
  --atlas-radius-md:8px;
  --atlas-radius-lg:14px;
  --atlas-radius-full:999px;

  /* ---------- Sombra / elevação — recalibrada pra fundo quase-preto:
     alpha mais alto e blur maior, senão a sombra não lê sobre #0B0C10. ---------- */
  --atlas-elevation-1:0 1px 2px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.12);
  --atlas-elevation-2:0 16px 42px rgba(0,0,0,.32);
  --atlas-elevation-3:0 30px 80px rgba(0,0,0,.5);

  /* ---------- Movimento ---------- */
  --atlas-duration-micro:120ms;
  --atlas-duration-padrao:200ms;
  --atlas-duration-momento:500ms;
  --atlas-duration-cerimonia:800ms;
  --atlas-ease-instrumento:cubic-bezier(.22,1,.36,1);

  /* ---------- Foco ----------
     Migrado de --atlas-route (azul) pra --atlas-gold: foco de teclado é
     feedback de INTERAÇÃO, não de dado/analytics -- não tem significado
     semântico próprio, então segue a regra "sem significado específico
     -> linguagem de marca" (Art. 11 do Brand System). */
  --atlas-focus-ring:0 0 0 2px var(--atlas-surface), 0 0 0 4px var(--atlas-gold);
}

@media (prefers-reduced-motion: reduce){
  :root{ --atlas-duration-micro:0ms; --atlas-duration-padrao:0ms; --atlas-duration-momento:0ms; --atlas-duration-cerimonia:0ms; }
}

/* Achado real (reportado pelo usuário): <textarea>/<input>/<select> sem
   estilo próprio numa página herdam fundo branco padrão do navegador +
   var(--atlas-text) (bem claro) do texto ao redor, ficando ilegível na
   identidade escura única. Isso é só uma rede de segurança global —
   qualquer página com seu próprio estilo de campo (ex: .campo input)
   continua mandando, por especificidade CSS mais alta. Exclui os tipos
   com renderização nativa própria (checkbox/radio/etc), que uma cor de
   fundo forçada quebraria visualmente. */
textarea,
select,
input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="image"]){
  background:var(--atlas-surface);
  color:var(--atlas-text);
  border-color:var(--atlas-border);
}