/* ============================================================
   Pense Mercado: tokens de design da marca 2027
   Fonte: manual-marca-pense-mercado-2027.pdf (sistema Tinta e Fósforo da ROO3).
   Tinta #0A0A0A, papel #F2F2EE, um único neon: amarelo #FFE600.
   O amarelo é só acento (no máximo 10% da tela). No tema claro ele NUNCA
   vira cor de texto (1,13:1 sobre o papel): só fundo, com texto tinta.
   Tema escuro = padrão da marca. O claro entra com a classe .tema-claro
   implícita (sem .tema-escuro).
   ============================================================ */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url('../fonts/space-grotesk-latin.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/ibm-plex-mono-600-latin.woff2') format('woff2'); }

/* ===== Primitivos (não mudam com o tema) ===== */
:root {
  --pm-tinta:   #0A0A0A;
  --pm-papel:   #F2F2EE;
  --pm-amarelo: #FFE600;
  --pm-cinza:   #8A8A8A;
  --pm-linha-escura: #2A2A2A;

  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  --pm-radius-sm: 2px;
  --pm-radius:    4px;
  --pm-radius-lg: 8px;
  --pm-borda-w:   1px;
  --pm-tracking-display: -0.02em;
  --pm-tracking-rotulo:  0.12em;

  /* acento: fundo amarelo com texto tinta vale nos dois temas (15,6:1) */
  --pm-accent:       var(--pm-amarelo);
  --pm-accent-bg:    var(--pm-amarelo);
  --pm-on-accent:    var(--pm-tinta);
  --pm-accent-hover: #E6CF00;
}

/* ===== Tema claro (papel) ===== */
:root {
  --pm-bg:          var(--pm-papel);
  --pm-surface:     #FFFFFF;
  --pm-surface-2:   #E8E8E2;
  --pm-line:        #D6D6CF;
  --pm-text:        var(--pm-tinta);
  --pm-muted:       #5C5C57;   /* 6:1 no papel; o #8A8A8A do manual não passa AA no claro */
  --pm-accent-text: var(--pm-tinta);
  --pm-accent-tint: rgba(10, 10, 10, .05);
  --pm-strong-bg:   var(--pm-tinta);
  --pm-on-strong:   var(--pm-papel);
  --pm-positivo:    #166534;
  --pm-negativo:    #B91C1C;
  --pm-neutro:      #5C5C57;
  --pm-navbar-bg:   var(--pm-papel);
  --pm-shadow:      0 1px 0 rgba(10, 10, 10, .06);
  --pm-focus:       var(--pm-tinta);
}

/* ===== Tema escuro (tinta, padrão da marca) ===== */
.tema-escuro {
  --pm-bg:          var(--pm-tinta);
  --pm-surface:     #141414;
  --pm-surface-2:   #1C1C1C;
  --pm-line:        var(--pm-linha-escura);
  --pm-text:        var(--pm-papel);
  --pm-muted:       var(--pm-cinza);   /* 4,9:1 até no #1C1C1C */
  --pm-accent-text: var(--pm-amarelo);
  --pm-accent-tint: rgba(255, 230, 0, .07);
  --pm-strong-bg:   #1F1F1F;
  --pm-on-strong:   var(--pm-papel);
  --pm-positivo:    #22C55E;
  --pm-negativo:    #F87171;
  --pm-neutro:      #8A8A8A;
  --pm-navbar-bg:   var(--pm-tinta);
  --pm-shadow:      0 1px 0 rgba(255, 255, 255, .04);
  --pm-focus:       var(--pm-amarelo);
}

/* ===== Nomes antigos do main.css apontando para os tokens =====
   Declarados de novo no .tema-escuro para resolverem lá (var() resolve no
   elemento onde a propriedade é declarada, não onde é usada). */
:root, .tema-escuro {
  --azul:        var(--pm-accent-text);
  --azul-md:     var(--pm-accent-text);
  --azul-dark:   var(--pm-strong-bg);
  --laranja:     var(--pm-accent-text);
  --positivo:    var(--pm-positivo);
  --negativo:    var(--pm-negativo);
  --neutro:      var(--pm-neutro);
  --radius:      var(--pm-radius-lg);
  --fonte:       var(--font-body);

  --bg:          var(--pm-bg);
  --fundo:       var(--pm-bg);
  --bg-card:     var(--pm-surface);
  --bg-card-2:   var(--pm-surface-2);
  --borda:       var(--pm-line);
  --texto:       var(--pm-text);
  --texto-sub:   var(--pm-muted);
  --navbar-bg:   var(--pm-navbar-bg);
  --shadow:      var(--pm-shadow);
  --ticker-bg:   var(--pm-bg);
  --modal-bg-c:  rgba(10, 10, 10, .72);
  --overlay-bg:  transparent;
  --overlay-end: var(--pm-bg);
}