/**
 * shared/css/marca.css — A MARCA do produto, num lugar só.
 * ─────────────────────────────────────────────────────────────────────────────
 * POR QUE ESTE ARQUIVO EXISTE, E POR QUE NÃO MEXI NO card-tokens.css
 *
 * O login/_shared/card-tokens.css tem um contrato explícito e estreito: ele
 * padroniza o CARD de login para que o card não "pule" quando o tema é
 * sorteado. Cada tema continua dono da sua arte e tinge os --accent* em runtime.
 * Se eu enfiasse tipografia, escala de texto e cores de página lá dentro, dois
 * estragos aconteceriam: (1) todo tema de login passaria a herdar regras que
 * não pediu, e o sistema de temas trocáveis deixaria de ser trocável de
 * verdade; (2) a página de apresentação, que não tem card nenhum, carregaria
 * regras de card.
 *
 * Então a evolução é por FORA e por BAIXO: este arquivo guarda a marca (cores,
 * tipos, ritmo, superfícies) e o card-tokens.css continua guardando o card. Os
 * VALORES aqui são os mesmos que já viviam no card-tokens e no tema
 * minimal-dark — dourado #BFA882, tinta #1A1A18, cantos retos. Nada mudou de
 * aparência; o que mudou é ter um lugar para essas decisões morarem.
 *
 * Quando quiser, o card-tokens.css pode passar a ler daqui (--login-accent:
 * var(--ouro)). Não fiz isso agora para não tocar num arquivo que está no ar e
 * funcionando.
 */

:root {
  /* ── Tinta: fundos, do mais fundo ao mais próximo ──
     Nunca #000. Preto puro é o cheiro de página gerada por máquina, e some a
     profundidade. Estes são off-blacks levemente quentes, para conversar com o
     dourado sem esverdear. */
  --tinta-0:      #0B0B0A;
  --tinta-1:      #131312;
  --tinta-2:      #1A1A18;
  --tinta-3:      #201F1D;

  /* ── Traço: as linhas de 1px que fazem o desenho ──
     A hierarquia deste produto é feita de FILETE, não de sombra. Escritório de
     arquitetura lê prancha; prancha é linha. */
  --linha:        #2A2A28;
  --linha-forte:  #3A3A36;

  /* ── Texto ── */
  --texto:        #E8E4DC;
  --texto-2:      #9A9590;
  --texto-3:      #6A6560;

  /* ── Dourado: o único acento. Um só, dessaturado. ──
     Regra que estou seguindo de propósito: no máximo UM acento. Duas cores de
     destaque numa página é o que faz software parecer barato. */
  --ouro:         #BFA882;
  --ouro-claro:   #D4BC94;
  --ouro-fraco:   rgba(191, 168, 130, 0.50);
  --ouro-vapor:   rgba(191, 168, 130, 0.09);

  /* ── Sinais de estado (mesmos do login, para não inventar paleta nova) ── */
  --verde:        #6A9A78;
  --terra:        #C4825A;

  /* ── Tipos ──
     Jost: geométrica, pesos leves, entrelinha aberta. Tem caráter de desenho
     técnico e NÃO é Inter — a fonte que todo site de software usa e que faz
     tudo parecer o mesmo site. Playfair em itálico entra só como voz editorial,
     em frases curtas, nunca em bloco de texto. */
  --fonte:        'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-nota:   'Playfair Display', Georgia, serif;

  /* ── Escala de texto: fluida, sem quebra entre celular e monitor ── */
  --t-micro:      clamp(9px,  0.55vw + 7px,  10.5px);
  --t-mini:       clamp(11px, 0.30vw + 10px, 13px);
  --t-corpo:      clamp(14px, 0.35vw + 13px, 16.5px);
  --t-corpo-g:    clamp(16px, 0.55vw + 14px, 19px);
  --t-titulo-3:   clamp(19px, 0.90vw + 16px, 26px);
  --t-titulo-2:   clamp(24px, 1.90vw + 18px, 40px);
  --t-titulo-1:   clamp(31px, 3.40vw + 20px, 62px);

  /* ── Ritmo vertical ── */
  --resp-secao:   clamp(64px, 9vh, 132px);
  --resp-bloco:   clamp(24px, 3.2vh, 44px);
  --margem:       clamp(20px, 5vw, 76px);
  --largura-max:  1280px;

  /* ── Cantos retos. Decisão de ateliê, herdada do card-tokens.css. ── */
  --canto:        0px;

  /* ── Curva de movimento única. Uma só, em tudo. ── */
  --curva:        cubic-bezier(0.16, 1, 0.30, 1);
}

/* ── A grade arquitetônica ──
   Malha de 48px, a mesma do tema minimal-dark do login. É a assinatura visual
   que amarra apresentação, login e sistema: quem entra sente que é o mesmo
   lugar. Fica em pseudo-elemento FIXO e sem eventos de ponteiro — se ficasse
   dentro de um contêiner que rola, o navegador repintaria a malha a cada
   scroll e o celular engasgaria. */
.malha::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--ouro-vapor) 1px, transparent 1px),
    linear-gradient(90deg, var(--ouro-vapor) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}

/* ── Rótulo miúdo em caixa alta ──
   O "carimbo de prancha". Aparece antes de títulos e em legendas. */
.rotulo {
  font-size: var(--t-micro);
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--texto-3);
  font-weight: 400;
}

/* ── Nota editorial (Playfair itálico) ── */
.nota {
  font-family: var(--fonte-nota);
  font-style: italic;
  font-weight: 300;
  color: var(--texto-2);
}

/* ── Acessibilidade: foco sempre visível, em qualquer tela do produto ──
   Exigência do PRODUCT.md (WCAG 2.1 AA). Fica aqui para valer em todas as
   páginas que carregarem a marca, e não só onde alguém lembrar. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: 3px;
}

/* ── Quem pediu menos movimento, recebe menos movimento ──
   Não é enfeite: existe gente que passa mal com animação. Também está no
   PRODUCT.md. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}