@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@500;600;700;800;900&display=swap');

/* ============================================================================
   BB BRAIN — TOKENS (fonte ÚNICA de verdade do design)
   ────────────────────────────────────────────────────────────────────────
   DIREÇÃO: "BLOOMBERG-NOIR" — terminal financeiro premium.
   Preto profundo + ÂMBAR-OURO (herói, assinatura do Bruno) + CIANO/TEAL
   (acento frio interativo/dados) = o duotone clássico "amber + cyan on black".
   Números em MONOSPACE (Space Mono, tabular). Títulos/chrome em DISPLAY
   condensada industrial (Big Shoulders Display) — contraste editorial vs. os
   mono-nums, densidade de instrumento, caráter inconfundível.
   Vermelho = SÓ semântico de perda. Verde = ganho. Âmbar = herói/alerta.
   Ciano = interativo/acento/dado. Neutros com viés QUENTE (não cinza morto).
   Carregado ANTES de main.css/financeiro.css/profissional.css.
   ========================================================================== */

:root {
  /* ── PALETA · ÂMBAR-OURO (escala) ──────────────────────────────────────────
     Herói do Bruno. Ouro quente e limpo — não o amarelo-neon de "aviso".
     Alto contraste sobre preto; usado em wordmark, foco, número-herói.        */
  --am-100: #fbe7c0;
  --am-200: #f5cf88;
  --am-300: #f0bb54;
  --am-400: #eeae38;   /* highlight / hover */
  --am-500: #e79c22;   /* PRIMÁRIO — ouro luxe (herói) */
  --am-600: #c9861a;   /* gold profundo (wordmark / borda) */
  --am-700: #99640f;
  --am-glow:  rgba(231, 156, 34, 0.22);
  --am-glow2: rgba(231, 156, 34, 0.40);

  /* ── PALETA · CIANO/TEAL (escala) — acento frio de contraponto ─────────────
     A outra metade do duotone de terminal. Interativo, links, dados vivos,
     indicadores "LIVE". Fresco e elétrico contra o ouro quente.               */
  --cy-100: #cdfaf3;
  --cy-200: #97f1e6;
  --cy-300: #66e8da;
  --cy-400: #40dccc;   /* highlight / hover */
  --cy-500: #2fd6c6;   /* PRIMÁRIO — ciano acento */
  --cy-600: #17b3a6;   /* teal profundo */
  --cy-700: #0d7d74;
  --cy-glow:  rgba(47, 214, 198, 0.20);
  --cy-glow2: rgba(47, 214, 198, 0.42);

  /* ── PALETA · escala neutra QUENTE (#0a0a09 → creme) ───────────────────────
     Rampa contínua do quase-preto (viés marrom sutil) ao creme. Base de todas
     as superfícies, molduras e níveis de tinta. Nada de cinza azulado morto.  */
  --n-0:   #0a0a09;   /* fundo raiz — preto profundo quente */
  --n-50:  #0e0d0b;
  --n-100: #141311;   /* card / superfície 1 */
  --n-150: #1a1712;   /* superfície levantada (âmbar-tingida) */
  --n-200: #211f1b;   /* linha / borda base */
  --n-300: #2c2925;   /* borda média */
  --n-400: #403a32;   /* hairline âmbar-morno / borda forte */
  --n-500: #5b554d;   /* muted */
  --n-600: #746c61;
  --n-700: #948c80;
  --n-800: #b1a99d;   /* ink-2 (texto secundário) */
  --n-900: #f1eee7;   /* ink (texto primário creme) */

  /* ── SEMÂNTICO · números financeiros ───────────────────────────────────────
     verde = positivo/entrada · vermelho = SÓ perda · âmbar = alerta.
     ciano = interativo/dado · violeta = domínio do cartão (Ultraviolet Black). */
  --pos:     #37d17e;   /* positivo (receita, saldo, sobra) */
  --pos-dim: #1f7a4d;
  --pos-glow: rgba(55, 209, 126, 0.24);
  --neg:     #f2564b;   /* negativo (SÓ perda/estouro) */
  --neg-dim: #8f2f28;
  --neg-glow: rgba(242, 86, 75, 0.22);
  --warn:  var(--am-500);
  --violet: #ab8cff;    /* cartão Ultraviolet (domínio próprio) */
  --violet-dim: #5b4a97;
  --info:  var(--cy-500);  /* "info"/interativo agora é o ciano do duotone */

  /* ── TIPOGRAFIA · famílias ─────────────────────────────────────────────────
     mono    = assinatura terminal, TODOS os números (tabular por natureza)
     sans    = rótulos, nomes humanos, corpo
     display = títulos/wordmark/eyebrows de caráter (Big Shoulders Display) —
               grotesk condensada industrial; densa, técnica, memorável.       */
  --font-mono: 'Space Mono', 'Fira Code', ui-monospace, monospace;
  --font-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-display: 'Big Shoulders Display', 'Space Grotesk', sans-serif;

  /* ── TIPOGRAFIA · escala (o número-herói DOMINA de verdade) ────────────────*/
  --fs-giant: 62px;   /* protagonista absoluto (saldo/fatura/cripto) */
  --fs-mega:  50px;   /* número-herói dominante */
  --fs-hero:  40px;
  --fs-2xl:   28px;
  --fs-xl:    22px;
  --fs-lg:    16px;
  --fs-md:    13px;   /* corpo */
  --fs-sm:    11px;
  --fs-xs:    9px;
  --fs-2xs:   8px;    /* eyebrow / caption */
  --fs-3xs:   7px;

  /* pesos */
  --fw-reg:  400;
  --fw-med:  500;
  --fw-bold: 700;
  --fw-black: 800;

  /* tracking (letter-spacing) */
  --tr-tight: -0.025em;  /* números grandes */
  --tr-nums:  0.005em;
  --tr-label: 0.14em;    /* eyebrow uppercase */
  --tr-wide:  0.22em;    /* wordmark */
  --tr-mega:  0.02em;    /* display condensada uppercase */

  /* line-heights */
  --lh-solid: 1;
  --lh-tight: 1.12;
  --lh-body:  1.45;

  /* ── ESPAÇAMENTO · ritmo 4/8 ───────────────────────────────────────────────*/
  --sp-05: 2px;  --sp-1: 4px;  --sp-15: 6px;  --sp-2: 8px;  --sp-25: 10px;
  --sp-3: 12px;  --sp-35: 14px; --sp-4: 16px; --sp-45: 18px; --sp-5: 20px;
  --sp-6: 24px;  --sp-8: 32px;

  /* ── RAIOS · MODERN TRADING TERMINAL — menos quadradão, cantos suaves ───────
     O terminal de 2026 não é caixa dura de planilha: superfícies flutuam com
     raio pequeno-moderno (6–10px). Frame/chrome fica reto; CARDS arredondam.  */
  --r-0:  0;  --r-sm: 4px;  --r-md: 6px;  --r-lg: 9px;  --r-pill: 999px;
  --r-card: 8px;   /* tile/widget/painel flutuante */
  --r-tile: 10px;  /* bloco herói / cartão de destaque */

  /* ── TINTA EM GRADIENTE · números-herói (drama + glow via filter) ───────────
     O protagonista de cada aba ganha tinta viva. Aplicar com background-clip:text
     + color:transparent; o glow vem de filter:drop-shadow (text-shadow não pinta
     texto transparente). Só no DARK — no claro a tinta vira cor sólida forte.   */
  --ink-amber:  linear-gradient(176deg, #ffe6ad 0%, #f0bb54 42%, #e79c22 100%);
  --ink-green:  linear-gradient(176deg, #9df5c2 0%, #4fe295 44%, #24b56c 100%);
  --ink-violet: linear-gradient(176deg, #e2d4ff 0%, #b79cff 44%, #8a6bf0 100%);
  --ink-red:    linear-gradient(176deg, #ffb0a8 0%, #f2564b 52%, #cf3c33 100%);
  --ink-cyan:   linear-gradient(176deg, #c9fbf3 0%, #52e2d2 44%, #22b7a8 100%);
  --drop-amber:  drop-shadow(0 0 24px rgba(231,156,34,.42)) drop-shadow(0 1px 1px rgba(0,0,0,.5));
  --drop-green:  drop-shadow(0 0 24px rgba(55,209,126,.40)) drop-shadow(0 1px 1px rgba(0,0,0,.5));
  --drop-violet: drop-shadow(0 0 26px rgba(171,140,255,.46)) drop-shadow(0 1px 1px rgba(0,0,0,.5));

  /* ── ELEVAÇÃO FLUTUANTE · cards que descolam do fundo (moderno, não bezel) ──
     Luz de topo + halo-hairline + sombra projetada difusa. Dá o "flutua" que o
     terminal premium tem — sem a moldura dura de 2–3px.                        */
  --fin-float-1: inset 0 1px 0 rgba(255,255,255,.07),
                 0 0 0 1px rgba(255,255,255,.035),
                 0 14px 34px -16px rgba(0,0,0,.85),
                 0 3px 10px -4px rgba(0,0,0,.55);
  --fin-float-2: inset 0 1px 0 rgba(255,255,255,.11),
                 0 0 0 1px var(--cy-glow2),
                 0 22px 48px -18px rgba(0,0,0,.9),
                 0 6px 16px -6px rgba(0,0,0,.6);
  --fin-hair-amber: 0 0 0 1px color-mix(in srgb, var(--am-500) 34%, transparent);
  --fin-hair-cyan:  0 0 0 1px color-mix(in srgb, var(--cy-500) 34%, transparent);

  /* ── TICKER · faixa de dados vivos (assinatura trading desk) ────────────────*/
  --tick-dur: 46s;   /* velocidade do rolo (marquee) */

  /* ── linhas/molduras QUENTES finas (recuo do "quadradão") ───────────────────*/
  --hair: color-mix(in srgb, var(--am-700) 30%, var(--n-200));
  --hair-soft: var(--n-200);

  /* ── ELEVAÇÃO · painéis "usinados" (bezel de instrumento) ──────────────────
     Luz no topo (inset) + sombra projetada + sombra inferior interna → dá a
     sensação de metal escovado / bezel de manômetro. 3 níveis + bezel base.   */
  --fin-elev-1: 0 1px 2px rgba(0,0,0,.55);
  --fin-elev-2: inset 0 1px 0 rgba(255,255,255,.06),
                0 2px 10px rgba(0,0,0,.6);
  --fin-elev-3: inset 0 1px 0 rgba(255,255,255,.09),
                0 8px 26px rgba(0,0,0,.62),
                0 2px 8px rgba(0,0,0,.5);
  --fin-bezel:  inset 0 1px 0 rgba(255,255,255,.07),
                inset 0 -1px 0 rgba(0,0,0,.6);
  /* realces (foco/hover de acento) */
  --fin-ring-amber: 0 0 0 1px var(--am-glow2);
  --fin-ring-cyan:  0 0 0 1px var(--cy-glow2);

  /* ── GLOW · brilho de tinta (herói / vivo) ─────────────────────────────────*/
  --glow-amber: 0 0 18px var(--am-glow);
  --glow-cyan:  0 0 16px var(--cy-glow);
  --glow-pos:   0 0 16px var(--pos-glow);

  /* ── TRANSIÇÕES / TEMPOS ───────────────────────────────────────────────────*/
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-1: 150ms;
  --dur-2: 220ms;
  --dur-3: 560ms;   /* draw-on de gráficos */
  --dur-4: 900ms;   /* draw-on longo (arcos, sparklines) */
}

/* ── Utilitário: números com alinhamento tabular (opt-in) ───────────────────*/
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }