/* ============================================================
   TOKENS — contrato de variáveis, reset, base (rx-core)

   rx-core NÃO define a aparência de nenhum produto. Este ficheiro só
   declara os NOMES das variáveis que os componentes partilhados usam,
   com valores de reserva neutros (cinzentos + fontes do sistema), para
   nada partir se uma página carregar isto sem tema.

   Os valores reais (paleta, fontes, ruído de fundo, largura da página)
   vivem no ficheiro de tema de cada produto, no repo do próprio
   produto — ex.: imovelrx/landing/css/theme.imovelrx.css,
   landing-community/css/theme.community.css, rxspot-site/css/theme.rxspot.css.
   O tema tem de ser carregado DEPOIS deste ficheiro.

   Os valores por omissão estão dentro de :where() (especificidade zero)
   — qualquer tema ganha sempre, seja qual for a ordem dos <link>.
   ============================================================ */

/* ── Contrato: valores de reserva neutros (tema escuro) ── */
:where(:root) {
  --page-max-width: 980px;

  /* Tipografia */
  --rx-font-display: system-ui, sans-serif;
  --rx-font-body:    system-ui, sans-serif;
  --rx-font-mono:    ui-monospace, monospace;

  /* Superfícies (0 = fundo da página, 1 = cartões/painéis, 2-3 = camadas acima) */
  --rx-surface-0: #111111;
  --rx-surface-1: #1b1b1b;
  --rx-surface-2: #242424;
  --rx-surface-3: #2e2e2e;

  /* Texto */
  --rx-text-1:  #eeeeee;
  --rx-text-2:  #bbbbbb;
  --rx-text-3:  #888888;
  --rx-muted-1: #5c5c5c;
  --rx-muted-2: #8a8a8a;

  /* Véus translúcidos (hover, fundos subtis) e bordas */
  --rx-tint-1: #ffffff0d;
  --rx-tint-2: #ffffff18;
  --rx-tint-3: #ffffff28;
  --rx-border:        #ffffff12;
  --rx-border-strong: #ffffff1e;

  /* Cor de destaque — UMA por produto */
  --rx-accent:       #9a9a9a;
  --rx-accent-hover: #b0b0b0;
  --rx-accent-glow:  #9a9a9a22;
  /* Os dois papéis do destaque além do fundo: texto/ícones POR CIMA de um
     fundo --rx-accent, e o destaque usado COMO cor de texto (links, títulos
     de secção, marca). Por omissão repetem --rx-surface-0 e --rx-accent, o
     comportamento de antes; um produto com um destaque claro define-os à
     parte (texto escuro por cima, tom mais escuro como texto). */
  --rx-accent-contrast: var(--rx-surface-0);
  --rx-accent-text:     var(--rx-accent);

  /* Semânticas */
  --rx-good: #22c55e;
  --rx-bad:  #ef4444;
  --rx-warn: #f59e0b;

  /* Ruído de fundo (body::before) — 0 = desligado */
  --rx-noise-opacity: 0;

  /* Overlay de transição (rx-core/overlay.css). Precisam de ser
     variáveis próprias: o overlay "congela" o tema (solid-dark/
     solid-light) independentemente do html.light — o tema do produto
     redefine-as directamente em #transition-overlay.solid-dark/-light. */
  --rx-overlay-scrim:          rgba(0,0,0,0.6);
  --rx-overlay-solid-bg:       #111111;
  --rx-overlay-text:           #eeeeee;
  --rx-overlay-text-sub:       #888888;
  --rx-overlay-brand:          #9a9a9a;
  --rx-overlay-spinner-track:  #ffffff18;
  --rx-overlay-spinner:        #9a9a9a;
  --rx-overlay-box-bg:         #1b1b1b;
  --rx-overlay-box-border:     #ffffff12;

  /* Rodapé do site em colunas (.site-footer, components.css). Por
     omissão segue as superfícies e o texto do tema; cada produto pode
     dar-lhe uma faixa própria (ex.: escura nos dois temas). */
  --rx-footer-bg:     var(--rx-surface-1);
  --rx-footer-border: var(--rx-border);
  --rx-footer-text:   var(--rx-text-1);
  --rx-footer-text-2: var(--rx-text-2);
  --rx-footer-muted:  var(--rx-text-3);
  --rx-footer-rule:   var(--rx-border);
  --rx-footer-brand:  var(--rx-accent-text);
}

/* ── Contrato: valores de reserva neutros (tema claro) ── */
:where(html.light) {
  --rx-surface-0: #f7f7f7;
  --rx-surface-1: #ffffff;
  --rx-surface-2: #eeeeee;
  --rx-surface-3: #e2e2e2;
  --rx-text-1:  #141414;
  --rx-text-2:  #333333;
  --rx-text-3:  #5f5f5f;
  --rx-muted-1: #878787;
  --rx-muted-2: #666666;
  --rx-tint-1: #0000000a;
  --rx-tint-2: #00000014;
  --rx-tint-3: #00000022;
  --rx-border:        #0000001c;
  --rx-border-strong: #0000002e;
  --rx-accent:       #6b6b6b;
  --rx-accent-hover: #555555;
  --rx-accent-glow:  #6b6b6b20;
  --rx-good: #15803d;
  --rx-bad:  #dc2626;
  --rx-warn: #c2700a;
  --rx-overlay-scrim:          rgba(255,255,255,0.6);
  --rx-overlay-solid-bg:       #f7f7f7;
  --rx-overlay-text:           #141414;
  --rx-overlay-text-sub:       #5f5f5f;
  --rx-overlay-brand:          #6b6b6b;
  --rx-overlay-spinner-track:  #0000001e;
  --rx-overlay-spinner:        #6b6b6b;
  --rx-overlay-box-bg:         #ffffff;
  --rx-overlay-box-border:     #00000014;
}

/* ── Nomes antigos (TRANSITÓRIO) ──────────────────────────────────
   Aliases dos nomes históricos para os novos, para não renomear de uma
   vez as centenas de usos espalhados pelos CSS de produto e partilhados.
   A remover no fim da separação, quando já ninguém os usar.
   Atenção: resolvem-se no <html> — um produto que redefina uma --rx-*
   num elemento mais abaixo NÃO actualiza o alias correspondente nesse
   elemento; nesses casos usar directamente o nome --rx-*. */
:root {
  --ink:        var(--rx-surface-0);
  --ink-2:      var(--rx-surface-1);
  --ink-3:      var(--rx-surface-2);
  --ink-4:      var(--rx-surface-3);
  --muted:      var(--rx-muted-1);
  --muted-2:    var(--rx-muted-2);
  --ghost:      var(--rx-tint-1);
  --ghost-2:    var(--rx-tint-2);
  --ghost-3:    var(--rx-tint-3);
  --wire:       var(--rx-border);
  --wire-2:     var(--rx-border-strong);
  --text:       var(--rx-text-1);
  --text-2:     var(--rx-text-2);
  --text-3:     var(--rx-text-3);
  --amber:      var(--rx-accent);
  --amber-2:    var(--rx-accent-hover);
  --amber-glow: var(--rx-accent-glow);
  --green:      var(--rx-good);
  --red:        var(--rx-bad);
  --yellow:     var(--rx-warn);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* Reserva sempre o espaço da scrollbar, mesmo quando o overflow do
     body é desligado (ex: página do relatório, que usa #app como
     contentor de scroll próprio). Sem isto, a largura efetiva da
     janela varia consoante a página, deslocando conteúdo centrado
     (ex: a topbar) para a direita quando o body deixa de ter scroll
     próprio. */
  scrollbar-gutter: stable;
}

body {
  font-family: var(--rx-font-body);
  background: var(--ink);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

html.light body {
  background: var(--ink);
  color: var(--text);
}

/* Noise texture overlay — mecanismo partilhado; a intensidade (ou
   desligar, com 0) é decisão de cada produto via --rx-noise-opacity. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1000;
  opacity: var(--rx-noise-opacity);
}

/* Animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}