/* =========================================================================
   Mr. Trader — Design Tokens
   Convencao: --cor-*, --sp-*, --ts-*, --raio-*, --sombra-*, --dur-*
   Sem acentos nos comentarios (convencao do projeto).
   Modo escuro como padrao. Adiciona [data-theme="light"] para tema claro.

   IMPORTANTE — Convencao de marca:
     --cor-primaria  = NAVY  (#1E3A5F)  Identidade institucional, sidebar, brand.
     --cor-acento    = INDIGO (#6366F1) Acao, CTA, link, ring de foco, item ativo.

   Nomes (--cor-primaria, --cor-primaria-hover, --cor-acento, etc) seguem o
   schema legado do projeto para permitir substituicao 1-para-1 do vars.css.
   ========================================================================= */

:root {
  /* ---------- Tipografia ---------- */
  /* Stack de sistema: Inter -> SF Pro -> sistema */
  --ff-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text",
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ff-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono",
             Menlo, Consolas, monospace;
  --fonte-base: var(--ff-sans);   /* alias do schema legado */
  --fonte-mono: var(--ff-mono);   /* alias do schema legado */

  /* Escala tipografica (px) — densa estilo Linear.
     Mantemos os aliases --ts-xs..--ts-4xl do schema legado. */
  --ts-11: 0.6875rem;   /* 11 — micro labels, tabelas auxiliares */
  --ts-12: 0.75rem;     /* 12 — labels, badges */
  --ts-13: 0.8125rem;   /* 13 — body denso, tabelas */
  --ts-14: 0.875rem;    /* 14 — body padrao */
  --ts-16: 1rem;        /* 16 — body relaxado */
  --ts-18: 1.125rem;    /* 18 — section title */
  --ts-20: 1.25rem;     /* 20 — h3 */
  --ts-24: 1.5rem;      /* 24 — h2 / KPI principal */
  --ts-28: 1.75rem;     /* 28 — KPI hero */
  --ts-32: 2rem;        /* 32 — h1 */
  --ts-40: 2.5rem;      /* 40 — display */

  /* Aliases legados — mantem retrocompatibilidade com o vars.css atual */
  --ts-xs:   var(--ts-12);
  --ts-sm:   var(--ts-14);
  --ts-base: var(--ts-16);
  --ts-lg:   var(--ts-18);
  --ts-xl:   var(--ts-20);
  --ts-2xl:  var(--ts-24);
  --ts-3xl:  var(--ts-32);
  --ts-4xl:  var(--ts-40);

  /* Pesos */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Line-heights */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* Letter-spacing */
  --ls-tight: -0.02em;   /* display */
  --ls-snug: -0.01em;    /* h1, h2 */
  --ls-normal: 0;
  --ls-wide: 0.04em;     /* labels uppercase */
  --ls-wider: 0.08em;    /* tags fiscais */

  /* ---------- Espacamento (escala 4/8/12/16/24/32/48) ---------- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  /* Aliases adicionais do schema legado */
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---------- Raios ---------- */
  --raio-sm: 4px;        /* input pequeno, badge */
  --raio: 6px;           /* card, botao padrao */
  --raio-md: 8px;        /* legado: usado como modal/card grande */
  --raio-lg: 12px;       /* legado: usado em panels grandes */
  --raio-xl: 16px;       /* legado */
  --raio-pill: 999px;    /* pills, status fiscais */

  /* ---------- Larguras ---------- */
  --container-max: 1200px;
  --sidebar-largura: 240px;

  /* ---------- Duracoes ---------- */
  --dur-fast: 80ms;
  --dur: 140ms;
  --dur-slow: 220ms;
  --easing: cubic-bezier(0.2, 0.8, 0.2, 1);
  --transicao: 150ms ease; /* alias legado */

  /* ---------- Z-index ---------- */
  --z-sidebar: 30;
  --z-topbar: 40;
  --z-drawer: 70;
  --z-modal: 80;
  --z-toast: 90;
}

/* =========================================================================
   TEMA ESCURO (PADRAO)
   Inspiracao: Linear (densidade), TradingView (numeros), Bloomberg Terminal
   ========================================================================= */
:root,
:root[data-theme="dark"] {
  /* ---------- Superficies ---------- */
  --cor-bg-app: #0A0E14;          /* fundo do app, mais escuro */
  --cor-bg-canvas: #0F141B;       /* canvas do conteudo */
  --cor-bg-surface: #151B24;      /* card */
  --cor-bg-surface-2: #1B2230;    /* card elevado, hover */
  --cor-bg-surface-3: #232C3D;    /* nivel 3, popover */
  --cor-bg-input: #0F141B;        /* input bg */
  --cor-bg-overlay: rgba(8, 11, 16, 0.72);

  /* Aliases legados de fundo (usados nas views existentes) */
  --cor-fundo:           var(--cor-bg-app);
  --cor-fundo-card:      var(--cor-bg-surface);
  --cor-fundo-hover:     var(--cor-bg-surface-2);

  /* ---------- Sidebar (NAVY institucional) ---------- */
  --cor-sidebar-bg: #0F1B2D;      /* navy mais escuro para dark theme */
  --cor-sidebar-border: #1F2E45;
  --cor-sidebar-fg: #CBD5E1;
  --cor-sidebar-fg-muted: #94A3B8;
  --cor-sidebar-fg-active: #FFFFFF;
  --cor-sidebar-item-hover: rgba(255, 255, 255, 0.04);
  --cor-sidebar-item-active: rgba(99, 102, 241, 0.14);
  --cor-sidebar-rail-active: var(--cor-acento);

  /* ---------- Texto ---------- */
  --cor-fg-1: #F1F5F9;            /* primario */
  --cor-fg-2: #CBD5E1;            /* secundario */
  --cor-fg-3: #94A3B8;            /* terciario, labels */
  --cor-fg-4: #64748B;            /* quaternario, hint */
  --cor-fg-disabled: #475569;
  --cor-fg-on-primary: #FFFFFF;

  /* Aliases legados de texto */
  --cor-texto:            var(--cor-fg-1);
  --cor-texto-secundario: var(--cor-fg-2);
  --cor-texto-muted:      var(--cor-fg-3);

  /* ---------- Bordas ---------- */
  --cor-borda: #1F2937;           /* borda padrao card */
  --cor-borda-2: #2A3447;         /* borda mais forte / hover */
  --cor-borda-forte: var(--cor-borda-2); /* alias legado */
  --cor-borda-input: #2A3447;
  --cor-borda-input-focus: var(--cor-acento);
  --cor-divisor: #1A2230;         /* row separator em tabela */

  /* =====================================================================
     MARCA — NAVY (--cor-primaria)
     Identidade institucional: sidebar, monograma, headers de marca.
     ===================================================================== */
  --cor-primaria:        #1E3A5F;
  --cor-primaria-claro:  #2E5583;
  --cor-primaria-hover:  #15294B;
  --cor-primaria-soft:   rgba(30, 58, 95, 0.22);
  --cor-primaria-fg:     #FFFFFF;

  /* =====================================================================
     ACAO — INDIGO (--cor-acento)
     CTA primario, link, item ativo na sidebar, ring de foco, linha do
     grafico, badge PRO, highlight de metrica.
     ===================================================================== */
  --cor-acento:          #6366F1;
  --cor-acento-hover:    #7C8AFF;
  --cor-acento-press:    #4F46E5;
  --cor-acento-soft:     rgba(99, 102, 241, 0.14);
  --cor-acento-soft-2:   rgba(99, 102, 241, 0.28);
  --cor-acento-fg:       #FFFFFF;

  /* ---------- Semantica financeira — ESSENCIAL ---------- */
  --cor-positivo: #10B981;        /* verde subindo */
  --cor-positivo-soft: rgba(16, 185, 129, 0.14);
  --cor-positivo-borda: rgba(16, 185, 129, 0.32);
  --cor-positivo-strong: #059669;

  --cor-negativo: #F43F5E;        /* vermelho caindo (rosado, mais legivel em dark) */
  --cor-negativo-soft: rgba(244, 63, 94, 0.14);
  --cor-negativo-borda: rgba(244, 63, 94, 0.32);
  --cor-negativo-strong: #E11D48;

  --cor-neutro: #94A3B8;
  --cor-neutro-soft: rgba(148, 163, 184, 0.12);

  /* Aliases legados de semantica */
  --cor-erro:           var(--cor-negativo);
  --cor-erro-claro:     var(--cor-negativo-soft);
  --cor-alerta:         #F59E0B;
  --cor-alerta-claro:   rgba(245, 158, 11, 0.14);
  --cor-info:           var(--cor-acento);
  --cor-info-claro:     var(--cor-acento-soft);
  --cor-sucesso:        var(--cor-positivo);
  --cor-sucesso-claro:  var(--cor-positivo-soft);

  /* ---------- Status fiscais ---------- */
  --cor-isento: #38BDF8;          /* azul ciano */
  --cor-isento-soft: rgba(56, 189, 248, 0.14);
  --cor-imposto: #F59E0B;         /* ambar — atencao */
  --cor-imposto-soft: rgba(245, 158, 11, 0.14);
  --cor-prejuizo: #F43F5E;
  --cor-prejuizo-soft: rgba(244, 63, 94, 0.14);
  --cor-ok: #10B981;
  --cor-ok-soft: rgba(16, 185, 129, 0.14);

  /* ---------- Tier badges (legado) ---------- */
  --cor-tier-free:    #64748B;
  --cor-tier-premium: var(--cor-acento);
  --cor-tier-pro:     #A78BFA;
  --cor-tier-admin:   #F8FAFC;

  /* ---------- Badges de tipo de ativo ---------- */
  --cor-tipo-stock: #818CF8;       /* acao */
  --cor-tipo-fii: #34D399;         /* fii */
  --cor-tipo-etf: #FBBF24;         /* etf */
  --cor-tipo-bdr: #A78BFA;         /* bdr */
  --cor-tipo-opcao: #F472B6;       /* opcao */
  --cor-tipo-cripto: #FB923C;      /* cripto */
  --cor-tipo-tesouro: #22D3EE;     /* tesouro */

  /* ---------- Heatmap correlacao (verde-neutro-vermelho) ----------
     Convencao financeira: vermelho = correlacao alta = concentracao = risco. */
  --cor-heat--3: #065F46;         /* -1.0 forte negativo (verde escuro) */
  --cor-heat--2: #047857;
  --cor-heat--1: #10B981;
  --cor-heat-0:  #1B2230;         /* 0 neutro (matches surface-2) */
  --cor-heat-1:  #F87171;
  --cor-heat-2:  #DC2626;
  --cor-heat-3:  #991B1B;         /* +1.0 forte positivo (vermelho escuro) */

  /* ---------- Sombras (sutis em dark) ---------- */
  --sombra-sm:    0 1px 2px rgba(0, 0, 0, 0.32);
  --sombra:       0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra-1:     var(--sombra);
  --sombra-md:    0 2px 6px rgba(0, 0, 0, 0.36), 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra-2:     0 4px 12px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra-lg:    var(--sombra-2);
  --sombra-modal: 0 24px 48px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --sombra-foco:  0 0 0 3px rgba(99, 102, 241, 0.32);

  /* ---------- Estados ---------- */
  --cor-hover: rgba(255, 255, 255, 0.04);
  --cor-press: rgba(255, 255, 255, 0.08);
  --cor-selecao: rgba(99, 102, 241, 0.20);
}

/* =========================================================================
   TEMA CLARO
   ========================================================================= */
:root[data-theme="light"] {
  --cor-bg-app: #F8FAFC;
  --cor-bg-canvas: #F1F5F9;
  --cor-bg-surface: #FFFFFF;
  --cor-bg-surface-2: #F8FAFC;
  --cor-bg-surface-3: #F1F5F9;
  --cor-bg-input: #FFFFFF;
  --cor-bg-overlay: rgba(15, 23, 42, 0.4);

  --cor-fundo:           var(--cor-bg-app);
  --cor-fundo-card:      var(--cor-bg-surface);
  --cor-fundo-hover:     var(--cor-bg-surface-2);

  /* Sidebar — navy institucional segue como brand mesmo em light */
  --cor-sidebar-bg: #1E3A5F;      /* --cor-primaria */
  --cor-sidebar-border: #2E5583;
  --cor-sidebar-fg: #CBD5E1;
  --cor-sidebar-fg-muted: #94A3B8;
  --cor-sidebar-fg-active: #FFFFFF;
  --cor-sidebar-item-hover: rgba(255, 255, 255, 0.06);
  --cor-sidebar-item-active: rgba(99, 102, 241, 0.22);
  --cor-sidebar-rail-active: #818CF8;

  --cor-fg-1: #0F172A;
  --cor-fg-2: #334155;
  --cor-fg-3: #64748B;
  --cor-fg-4: #94A3B8;
  --cor-fg-disabled: #CBD5E1;
  --cor-fg-on-primary: #FFFFFF;

  --cor-texto:            var(--cor-fg-1);
  --cor-texto-secundario: var(--cor-fg-2);
  --cor-texto-muted:      var(--cor-fg-3);

  --cor-borda: #E2E8F0;
  --cor-borda-2: #CBD5E1;
  --cor-borda-forte: var(--cor-borda-2);
  --cor-borda-input: #CBD5E1;
  --cor-borda-input-focus: #4F46E5;
  --cor-divisor: #F1F5F9;

  /* MARCA — navy (mesmos hex do dark, ja institucional) */
  --cor-primaria:        #1E3A5F;
  --cor-primaria-claro:  #2E5583;
  --cor-primaria-hover:  #15294B;
  --cor-primaria-soft:   rgba(30, 58, 95, 0.10);
  --cor-primaria-fg:     #FFFFFF;

  /* ACAO — indigo (mais saturado em light p/ contraste) */
  --cor-acento:          #4F46E5;
  --cor-acento-hover:    #4338CA;
  --cor-acento-press:    #3730A3;
  --cor-acento-soft:     rgba(79, 70, 229, 0.10);
  --cor-acento-soft-2:   rgba(79, 70, 229, 0.20);
  --cor-acento-fg:       #FFFFFF;

  --cor-positivo: #059669;
  --cor-positivo-soft: rgba(5, 150, 105, 0.10);
  --cor-positivo-borda: rgba(5, 150, 105, 0.32);
  --cor-positivo-strong: #047857;

  --cor-negativo: #DC2626;
  --cor-negativo-soft: rgba(220, 38, 38, 0.10);
  --cor-negativo-borda: rgba(220, 38, 38, 0.32);
  --cor-negativo-strong: #991B1B;

  --cor-neutro: #64748B;
  --cor-neutro-soft: rgba(100, 116, 139, 0.10);

  --cor-erro:           var(--cor-negativo);
  --cor-erro-claro:     var(--cor-negativo-soft);
  --cor-alerta:         #B45309;
  --cor-alerta-claro:   rgba(180, 83, 9, 0.10);
  --cor-info:           var(--cor-acento);
  --cor-info-claro:     var(--cor-acento-soft);
  --cor-sucesso:        var(--cor-positivo);
  --cor-sucesso-claro:  var(--cor-positivo-soft);

  --cor-isento: #0284C7;
  --cor-isento-soft: rgba(2, 132, 199, 0.10);
  --cor-imposto: #B45309;
  --cor-imposto-soft: rgba(180, 83, 9, 0.10);
  --cor-prejuizo: #DC2626;
  --cor-prejuizo-soft: rgba(220, 38, 38, 0.10);
  --cor-ok: #059669;
  --cor-ok-soft: rgba(5, 150, 105, 0.10);

  --cor-tier-free:    #64748B;
  --cor-tier-premium: var(--cor-acento);
  --cor-tier-pro:     #7C3AED;
  --cor-tier-admin:   #0F172A;

  --cor-tipo-stock: #4F46E5;
  --cor-tipo-fii: #059669;
  --cor-tipo-etf: #B45309;
  --cor-tipo-bdr: #7C3AED;
  --cor-tipo-opcao: #DB2777;
  --cor-tipo-cripto: #EA580C;
  --cor-tipo-tesouro: #0E7490;

  --cor-heat--3: #047857;
  --cor-heat--2: #10B981;
  --cor-heat--1: #6EE7B7;
  --cor-heat-0:  #FFFFFF;
  --cor-heat-1:  #FCA5A5;
  --cor-heat-2:  #DC2626;
  --cor-heat-3:  #991B1B;

  --sombra-sm:    0 1px 2px rgba(15, 23, 42, 0.06);
  --sombra:       0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --sombra-1:     var(--sombra);
  --sombra-md:    0 4px 6px -1px rgba(15, 23, 42, 0.10), 0 2px 4px -1px rgba(15, 23, 42, 0.06);
  --sombra-2:     0 4px 12px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --sombra-lg:    0 10px 15px -3px rgba(15, 23, 42, 0.10), 0 4px 6px -2px rgba(15, 23, 42, 0.05);
  --sombra-modal: 0 24px 48px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.06);
  --sombra-foco:  0 0 0 3px rgba(79, 70, 229, 0.22);

  --cor-hover: rgba(15, 23, 42, 0.04);
  --cor-press: rgba(15, 23, 42, 0.08);
  --cor-selecao: rgba(79, 70, 229, 0.14);
}

/* =========================================================================
   TIPOGRAFIA — Estilos semanticos
   ========================================================================= */
html {
  font-family: var(--ff-sans);
  font-size: 14px; /* base 14 — densidade financeira */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01", "ss03"; /* Inter ligaduras humanas */
}

body {
  font-family: var(--ff-sans);
  font-size: var(--ts-14);
  line-height: var(--lh-normal);
  color: var(--cor-fg-1);
  background: var(--cor-bg-app);
  font-weight: var(--fw-regular);
}

/* Cabecalhos */
.h-display {
  font-size: var(--ts-40);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--cor-fg-1);
}
.h1 {
  font-size: var(--ts-32);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-snug);
  color: var(--cor-fg-1);
}
.h2 {
  font-size: var(--ts-24);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--cor-fg-1);
}
.h3 {
  font-size: var(--ts-18);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--cor-fg-1);
}
.h4 {
  font-size: var(--ts-16);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--cor-fg-1);
}

.body { font-size: var(--ts-14); line-height: var(--lh-normal); color: var(--cor-fg-2); }
.body-sm { font-size: var(--ts-13); line-height: var(--lh-normal); color: var(--cor-fg-2); }
.caption { font-size: var(--ts-12); line-height: var(--lh-snug); color: var(--cor-fg-3); }
.micro { font-size: var(--ts-11); line-height: var(--lh-snug); color: var(--cor-fg-3); }

.label {
  font-size: var(--ts-12);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--cor-fg-3);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.mono {
  font-family: var(--ff-mono);
  font-feature-settings: "tnum", "zero";
}

/* Numeros: SEMPRE tabular-nums em qualquer numero financeiro */
.num,
.num-lg,
.num-xl,
td.num,
.kpi-value,
.tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "cv11";
}

.num-xl {
  font-size: var(--ts-28);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-snug);
}
.num-lg {
  font-size: var(--ts-20);
  font-weight: var(--fw-semibold);
}

/* Cores semanticas para numeros */
.num.pos, .pos-fg { color: var(--cor-positivo); }
.num.neg, .neg-fg { color: var(--cor-negativo); }
.num.neu, .neu-fg { color: var(--cor-fg-3); }

/* Links — usam ACENTO indigo (acao), nao a marca */
a {
  color: var(--cor-acento);
  text-decoration: none;
}
a:hover { color: var(--cor-acento-hover); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--cor-acento); outline-offset: 2px; border-radius: 2px; }