/* ============================================================
   GPTAll — Base (reset, tipografia, layout, utilitários de marca)
   Carrega depois de tokens.css. Componentes de página (home, auth,
   painel, tutoriais) ganham arquivos próprios nas tarefas seguintes
   — este arquivo é só a fundação que qualquer página compartilha.
   ============================================================ */

@layer reset, base, layout, components, utilities, animations;

/* -------------- Reset --------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--font-body);
    background: var(--color-void);
    color: var(--color-paper);
    -webkit-font-smoothing: antialiased;
    line-height: var(--leading-body);
  }
  img, svg, video { max-width: 100%; height: auto; display: block; }
  a { text-decoration: none; color: inherit; }
  button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; }
  html, body { overflow-x: hidden; }

  /* A Regra do Vidro Frio: nunca preto/branco puros — já garantida pelos
     tokens (--color-void e --color-paper carregam a tinta 235). */

  :focus-visible {
    outline: 2px solid var(--color-signal);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  }
}

/* -------------- Base: tipografia ----------------------------- */
@layer base {
  .t-display {
    font-family: var(--font-display);
    font-size: var(--text-display);
    font-weight: 700;
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
  }
  .t-headline {
    font-family: var(--font-display);
    font-size: var(--text-headline);
    font-weight: 600;
    line-height: var(--leading-headline);
  }
  .t-title {
    font-family: var(--font-body);
    font-size: var(--text-title);
    font-weight: 600;
    line-height: var(--leading-title);
  }
  .t-body {
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 400;
    line-height: var(--leading-body);
    max-width: 75ch;
  }
  .t-label {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    font-weight: 500;
    line-height: var(--leading-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }
  /* A Regra do Nome Copiável: todo nome de modelo e comando de terminal
     usa .t-code (Martian Mono), nunca .t-body nem itálico. */
  .t-code {
    font-family: var(--font-mono);
    font-size: var(--text-code);
    font-weight: 400;
    line-height: var(--leading-code);
  }

  .text-paper-dim { color: var(--color-paper-dim); }
  .text-signal { color: var(--color-signal); }
  .text-signal-deep { color: var(--color-signal-deep); }
}

/* -------------- Layout ---------------------------------------- */
@layer layout {
  .container {
    width: 100%;
    max-width: var(--stage-max);
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 3rem);
  }
  .container-copy {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 2rem);
  }
  /* Respiro maior desde 2026-08-04: sem as bordas hairline, é o espaço que
     passa a separar as seções. Piso e teto subiram um degrau (64→96, 96→128)
     porque a referência é generosa de espaço, e densidade alta com divisor
     invisível vira massa indistinta. */
  .section-py { padding: clamp(var(--space-2xl), 9vw, 128px) 0; }
  .stack { display: flex; flex-direction: column; }
  .stack > * + * { margin-top: var(--space-md); }
}

/* -------------- Componentes de marca (Bancada de Sinal) ------- */
@layer components {
  /* Painel: degrau de elevação sem sombra projetada (A Regra do Painel
     Plano) — nunca use box-shadow para indicar destaque aqui. */
  .panel {
    background: var(--color-panel);
    border: 1px solid var(--color-graticule-dim);
    border-radius: var(--radius-none);
  }
  /* Hover SÓ em painel que é de fato interativo. A regra global `.panel:hover`
     acendia todo cartão estático do site (plano, passo, card do painel,
     cartão de auth) — affordance falsa: o elemento reage ao mouse e não faz
     nada. Auditoria T12.3/T12.4 confirmou que nenhum `.panel` do site é
     clicável hoje; o degrau de luminosidade fica reservado a quem tiver
     comportamento real (link, botão ou foco por teclado). */
  a.panel:hover,
  button.panel:hover,
  .panel--interactive:hover,
  .panel[tabindex]:hover { background: var(--color-panel-hover); }

  /* Marca de canto em L (crop mark) — assinatura geométrica recorrente,
     reservada a contêineres-chave (herói, bloco de código, cartão de
     plano em destaque). Nunca decorativo em elementos menores. Aplique
     em um elemento position:relative; usa a cor --crop-color (default
     graticule; troque para --color-signal só na região que já carrega
     o traço, nunca em duas regiões do mesmo viewport — Regra do Canal
     Único). */
  /* APOSENTADAS em 2026-08-04. Marca de registro pressupõe aresta: com o raio
     de 16-20px o vértice do L caía 6,6px DENTRO da curva e o desenho deixava
     de registrar canto nenhum, virando um colchete solto. Mantidas como no-op
     em vez de removidas porque a classe está em 5 arquivos HTML; assim nenhum
     markup quebra, e a decisão fica num lugar só. A neutralização é pelas
     custom properties abaixo, NÃO por `content: none` — os pseudo-elementos
     são declarados depois e venceriam na cascata. Para reativar, devolva os
     valores originais (graticule / 14px / 1.6px / 8px). */
  .crop-marks {
    --crop-color: transparent;
    --crop-size: 0px;
    --crop-width: 0px;
    --crop-offset: 0px;
    position: relative;
  }
  .crop-marks::before,
  .crop-marks::after {
    content: '';
    position: absolute;
    width: var(--crop-size);
    height: var(--crop-size);
    pointer-events: none;
  }
  .crop-marks::before {
    top: var(--crop-offset);
    left: var(--crop-offset);
    border-top: var(--crop-width) solid var(--crop-color);
    border-left: var(--crop-width) solid var(--crop-color);
  }
  .crop-marks::after {
    bottom: var(--crop-offset);
    right: var(--crop-offset);
    border-bottom: var(--crop-width) solid var(--crop-color);
    border-right: var(--crop-width) solid var(--crop-color);
  }
  /* As duas marcas que faltam (canto superior-direito e inferior-esquerdo)
     exigem um segundo par de pseudo-elementos — resolvido pelos filhos
     .crop-marks__tr / .crop-marks__bl quando o container precisar dos
     quatro cantos completos (herói, bloco de código, cartão de plano). */
  .crop-marks__tr,
  .crop-marks__bl {
    position: absolute;
    width: var(--crop-size, 14px);
    height: var(--crop-size, 14px);
    pointer-events: none;
  }
  .crop-marks__tr {
    top: var(--crop-offset, 8px);
    right: var(--crop-offset, 8px);
    border-top: var(--crop-width, 1.6px) solid var(--crop-color, var(--color-graticule));
    border-right: var(--crop-width, 1.6px) solid var(--crop-color, var(--color-graticule));
  }
  .crop-marks__bl {
    bottom: var(--crop-offset, 8px);
    left: var(--crop-offset, 8px);
    border-bottom: var(--crop-width, 1.6px) solid var(--crop-color, var(--color-graticule));
    border-left: var(--crop-width, 1.6px) solid var(--crop-color, var(--color-graticule));
  }

  /* Chip de modelo/comando copiável — o único lugar, junto do CTA
     primário, onde o traço amarelo-sinal pode aparecer nesta página. */
  .model-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    background: var(--color-panel);
    border: 1.5px solid var(--color-signal);
    border-radius: var(--radius-md);
    padding: var(--space-xs) var(--space-sm);
    font-family: var(--font-mono);
    font-size: var(--text-code);
    color: var(--color-signal);
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 var(--space-lg);
    /* Pill. A referência usa raio total em botão; 6-10px é o raio de
       framework genérico, que é exatamente o que ela não parece. O padding
       horizontal sobe junto: botão pill com padding curto vira comprimido. */
    border-radius: 9999px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--text-body);
    transition: background var(--duration-fast) var(--ease-sweep), color var(--duration-fast) var(--ease-sweep);
  }
  .btn--primary {
    background: var(--color-signal);
    color: var(--color-void);
  }
  .btn--primary:hover { background: var(--color-signal-deep); color: var(--color-void); }
  .btn--ghost {
    background: transparent;
    color: var(--color-paper);
    /* Contorno legível pelo mesmo princípio do campo: botão fantasma com
       borda invisível vira texto solto e deixa de se anunciar como controle. */
    border: 1px solid var(--color-graticule);
  }
  .btn--ghost:hover { border-color: var(--color-paper-dim); }

  .field {
    display: block;
    width: 100%;
    background: var(--color-panel);
    /* --color-graticule (45%), NÃO o -dim (22%): divisor estrutural pode
       desaparecer no fundo, campo de formulário não pode. Sobre o painel de
       20% o dim daria 2 pontos de luminância e o usuário não veria onde
       digitar. Controle interativo mantém contorno legível por princípio. */
    border: 1px solid var(--color-graticule);
    border-radius: var(--radius-md);
    color: var(--color-paper);
    font-family: var(--font-body);
    font-size: var(--text-body);
    padding: 12px 14px;
    min-height: 44px;
  }
  .field::placeholder { color: var(--color-paper-dim); }
  .field:focus { outline: none; border-color: var(--color-signal); box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-signal) 25%, transparent); }

  /* Estados de mensagem de formulário (repouso, foco, carregando, sucesso,
     erro de validação/rede/servidor) — mesma convenção de classe das
     marcas irmãs (auth-msg), reprojetada nas cores da Bancada de Sinal. */
  .auth-msg {
    display: none;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
  }
  .auth-msg.is-visible { display: block; }
  .auth-msg--error { background: color-mix(in oklch, var(--color-danger) 12%, var(--color-panel)); border-color: var(--color-danger); color: var(--color-paper); }
  .auth-msg--success { background: color-mix(in oklch, var(--color-signal) 12%, var(--color-panel)); border-color: var(--color-signal-deep); color: var(--color-paper); }

  /* Modal do bloqueio de e-mail descartável (disposable-domains.js). */
  .gp-modal-overlay {
    position: fixed; inset: 0; z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-sm);
    background: color-mix(in oklch, var(--color-void) 72%, transparent);
  }
  .gp-modal-overlay[hidden] { display: none; }
  .gp-modal-card {
    background: var(--color-panel);
    color: var(--color-paper);
    border: 1px solid var(--color-graticule-dim);
    border-radius: var(--radius-md);
    max-width: 440px; width: 100%; padding: var(--space-md);
  }
  .gp-modal-title { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; margin-bottom: var(--space-half); }
  .gp-modal-text { font-family: var(--font-body); color: var(--color-paper-dim); margin-bottom: var(--space-sm); }
}

/* -------------- Utilitários ------------------------------------ */
@layer utilities {
  .is-hidden { display: none !important; }
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
}

/* -------------- Animações --------------------------------------- */
@layer animations {
  /* "Sweep": varredura horizontal como o feixe do osciloscópio. Anima só
     transform/opacity (nunca layout), com ease-out exponencial. Some
     inteiramente sob prefers-reduced-motion — o conteúdo nasce no
     estado final, nunca escondido. */
  @keyframes sweep-in {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: translateX(0); }
  }
  .sweep-in {
    animation: sweep-in var(--duration-sweep) var(--ease-sweep) both;
  }
  @media (prefers-reduced-motion: reduce) {
    .sweep-in { animation: none; opacity: 1; transform: none; }
  }
}

/* -------------- Raio por papel de superfície (ver home.css) -------------- */
@layer components {
  .panel { border-radius: var(--radius-lg); }
  .btn, .btn--ghost { border-radius: var(--radius-md); }
  .auth-msg, .auth-msg--error, .auth-msg--success { border-radius: var(--radius-sm); }
}