/* Axxis Retail, opcao 2: modelo e cores do manual de marca v1.
   Carrega DEPOIS de tokens.css e site.css: a estrutura e a mesma da opcao 1,
   aqui so os tokens e os componentes que mudam de cara.
   Regras de cor: Noite e Papel alternam; Indigo e a cor de sistema e do botao no claro;
   Lima e a cor de acao no escuro (texto Noite sobre Lima). Lima NUNCA vira texto sobre Papel.
   Logo: so os arquivos oficiais de /assets/marca/. */

:root{
  /* base: Noite e Papel */
  --ax-preto:#0B1220;          /* Noite */
  --ax-preto-2:#121B2E;        /* Noite 2: cards e secao escura alternativa */
  --ax-preto-3:#1C2740;        /* Noite 3: bordas no escuro */
  --ax-marfim:#F5F3EE;         /* Papel */
  --ax-marfim-2:#E3DFD5;       /* bordas no Papel */
  --ax-branco:#FFFFFF;

  /* os nomes "ouro" sao o contrato do site.css; aqui eles apontam para a paleta v1 */
  --ax-ouro:#C6F432;           /* Lima: acao e destaque no escuro */
  --ax-ouro-claro:#C6F432;
  --ax-ouro-escuro:#4338CA;    /* Indigo: tudo que era dourado sobre fundo claro */
  --ax-ouro-grad:linear-gradient(#C6F432, #C6F432);

  --v2-indigo:#4338CA;
  --v2-indigo-fundo:#E7E6FB;
  --v2-lima:#C6F432;
  --v2-grade:color-mix(in srgb, #E8ECF4 5%, transparent);

  /* texto */
  --ax-texto-claro:#E8ECF4;
  --ax-texto-claro-2:#94A3B8;  /* secundario no escuro */
  --ax-texto-escuro:#0B1220;
  --ax-texto-escuro-2:#475069; /* Grafite: secundario no claro */

  /* tipografia */
  --ax-f-display:"Bricolage Grotesque",system-ui,sans-serif;
  --ax-f-texto:"Hanken Grotesk",system-ui,sans-serif;
  --ax-f-rotulo:"IBM Plex Mono",ui-monospace,monospace;

  --ax-raio:14px; --ax-raio-lg:22px;
}

/* ---------- fundo noite com grade esmaecida de 56px ---------- */
.v2 .s-escura,.v2 .s-escura-2,.v2 .rodape{
  background-image:
    linear-gradient(var(--v2-grade) 1px, transparent 1px),
    linear-gradient(90deg, var(--v2-grade) 1px, transparent 1px);
  background-size:56px 56px;
}
.v2 .hero{
  background:
    radial-gradient(55% 45% at 82% 12%, color-mix(in srgb, var(--v2-indigo) 34%, transparent), transparent 70%),
    linear-gradient(var(--v2-grade) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, var(--v2-grade) 1px, transparent 1px) 0 0 / 56px 56px,
    var(--ax-preto);
}

/* ---------- tipografia ---------- */
.v2 .h1{ letter-spacing:-.03em; line-height:1; }
.v2 .h2{ letter-spacing:-.028em; line-height:1.04; }
.v2 .h3{ letter-spacing:-.02em; }
.v2 .frase-grande,.v2 .fecha .h2,.v2 .grande-pct{ letter-spacing:-.04em; }

.v2 .rotulo{ font:500 12px/1.3 var(--ax-f-rotulo); letter-spacing:.12em; }
.v2 .rotulo::before{ content:none; }
.v2 .s-clara .rotulo{ color:var(--v2-indigo); }

/* numeracao mono 01 02 03 nas secoes */
.v2 main{ counter-reset:secao; }
.v2 .sec-cabeca > .rotulo::before{
  content:counter(secao, decimal-leading-zero); counter-increment:secao;
  width:auto; height:auto; background:none; opacity:.75;
}
.v2 .sec-cabeca > .rotulo::after{ content:""; width:40px; height:1px; background:currentColor; opacity:.5; }

/* rotulos internos em mono, sem tracinho */
.v2 .passo small,.v2 .fluxo small,.v2 .sim-bloco h3,.v2 .res small,.v2 .coluna h3,
.v2 .tabela-comp thead th,.v2 .rodape h2,.v2 .selo-exemplo,.v2 .em-breve,.v2 .selo-top,.v2 .selo-pdv{
  font-family:var(--ax-f-rotulo); font-weight:500; letter-spacing:.1em;
}

/* ---------- botoes ---------- */
.v2 .btn{ font:700 15px/1.2 var(--ax-f-texto); }
.v2 .menu .btn{ font-size:14px; }
.v2 .s-clara .btn:not(.btn-linha){ --b-bg:var(--v2-indigo); --b-cor:var(--ax-branco); }
.v2 .s-clara .plano.destaque .btn,.v2 .s-clara .form-card .btn{ --b-bg:var(--v2-lima); --b-cor:var(--ax-preto); } /* cartao escuro dentro do claro: acao em Lima */
.v2 .btn-preto{ --b-bg:var(--ax-preto); --b-cor:var(--v2-lima); }

/* ---------- cards e icones ---------- */
.v2 .plano.destaque .rotulo{ color:var(--v2-lima); }
.v2 .s-clara .plano.destaque::after{ box-shadow:inset 0 0 0 1.5px var(--v2-lima); }
.v2 .s-clara .icone-caixa{ background:var(--v2-indigo-fundo); color:var(--v2-indigo); }
.v2 .s-clara .card::after{ box-shadow:inset 0 0 0 1.5px var(--v2-indigo); }
.v2 .s-clara .card{ border-color:var(--ax-marfim-2); }
.v2 .modulo-icone .icone-caixa{ background:color-mix(in srgb, var(--v2-lima) 12%, transparent); color:var(--v2-lima); }
.v2 .ciclo input:checked + span{ background:var(--ax-preto); color:var(--v2-lima); }
.v2 .ciclo input:focus-visible + span{ outline-color:var(--v2-indigo); }

/* ---------- monitor em grafite azulado (so troca as variaveis do site.css) ---------- */
.v2 .monitor{
  --mon-a:#2A3550; --mon-b:#172036; --mon-c:#0D1424;
  --mon-brilho:rgba(232,236,244,.20);
  --mon-reflexo:rgba(165,180,252,.08);
}
.v2 .monitor .ampliar{ font-family:var(--ax-f-rotulo); font-weight:500; background:rgba(11,18,32,.8); box-shadow:inset 0 0 0 1px rgba(232,236,244,.2); color:#E8ECF4; }
.v2 .monitor-tela:hover .ampliar,.v2 .monitor-tela:focus-visible .ampliar{ color:#C6F432; box-shadow:inset 0 0 0 1px #C6F432; }

/* ---------- fechamento em Lima, texto Noite ---------- */
.v2 .fecha{ background:var(--v2-lima); color:var(--ax-preto); }

/* ---------- rodape: link discreto para comparar com a opcao 1 ---------- */