/* ─── Plataforma Paid — Design Tokens v2.0 (25/07/2026) ───
   Fonte da verdade: design_handoff_plataforma_paid_2.0/design-tokens-2.0.css.
   Substitui a linguagem "7a executiva" (v1): fonte do sistema na UI (IBM Plex fica
   só na documentação), fundo #F5F5F7, raio 14px, hairlines no lugar de caixas.
   ⟳ 27/07 — decisão do Hyuri: o MENU PRINCIPAL VOLTA PRA LATERAL ESQUERDA (sidebar
   navy fixa). O handoff 2.0 tinha tirado a sidebar em favor da barra superior; a
   barra continua existindo, mas só com o contexto (escopo, frescor, sessão). */

/* ─── ESCALA GLOBAL (28/07) ────────────────────────────────────────────────
   O Hyuri: "na minha tela maior com zoom do Chrome em 110% ficou melhor".
   Em vez de pedir que ele deixe o navegador em 110% (que não viaja entre
   máquinas, não vale pra quem receber o link e some a cada perfil novo), a
   escala virou UM BOTÃO aqui.

   Como funciona: a raiz do documento passa a valer `16px × --escala`, e TODO
   tamanho do sistema — tipo, espaçamento, largura do menu, teto da coluna — é
   declarado em `rem`. Mudar `--escala` reescala a plataforma inteira, do mesmo
   jeito que o zoom faz, só que sem depender do navegador.

   Por que NÃO em px com media query: o zoom do Chrome também encolhe a viewport,
   então os pontos de quebra andariam junto. Aqui eles ficam parados de propósito —
   1000px continua sendo 1000px de janela real, e o menu reduzido não muda de
   comportamento só porque o texto cresceu.

   1.0 = o desenho de 25/07 · 1.1 = o que o Hyuri aprovou em 28/07. */
:root { --escala: 1.1; }
html { font-size: calc(16px * var(--escala)); }
/* O corpo volta pra escala legível: sem isto, texto sem token herdaria 17,6px. */
body { font: var(--text-body); }

:root {
  /* Tipografia — UI com a fonte do sistema (SF/Segoe); números em mono do sistema. */
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-num: ui-monospace, 'SF Mono', Menlo, monospace; /* sempre tabular-nums */

  /* ── A ESCADA DE TIPO (28/07) ─────────────────────────────────────────────
     Antes existiam QUINZE tamanhos soltos (8 · 9,5 · 10 · 10,5 · 11 · 11,5 · 12 ·
     12,5 · 13 · 13,5 · 14 · 14,5 · 19 · 20 · 26), escritos à mão em 89 lugares
     entre o shell.css e as mesas. Dois textos com o mesmo papel apareciam com
     tamanhos diferentes em telas diferentes — foi disso que o Hyuri reclamou.

     Agora são 9 degraus, e NENHUMA tela declara px de fonte: quem precisa de
     tamanho usa um destes. Valor em rem pra escalar com `--escala`; o px ao lado
     é o tamanho em escala 1.0, só pra leitura.

     Regra: se um texto novo não couber em nenhum degrau, o degrau é que está
     errado — discuta o degrau, não crie o 16º tamanho. */
  --fs-micro: 0.5625rem;   /*  9px  — hachura, selo minúsculo */
  --fs-label: 0.625rem;    /* 10px  — rótulo caixa alta, cabeçalho de tabela */
  --fs-meta:  0.71875rem;  /* 11,5px — meta, tabela densa, texto de ajuda */
  --fs-sm:    0.78125rem;  /* 12,5px — rótulo de controle, chip, botão */
  --fs-body:  0.8125rem;   /* 13px  — corpo */
  --fs-md:    0.9375rem;   /* 15px  — título de tela, valor de KPI */
  --fs-lg:    1.0625rem;   /* 17px  — valor de destaque */
  --fs-xl:    1.25rem;     /* 20px  — número grande */
  --fs-xxl:   1.625rem;    /* 26px  — herói (só a tela Início usa) */

  /* Superfícies */
  --color-bg: #F5F5F7;
  --color-card: #FFFFFF;
  --color-card-soft: #FBFBFD;      /* cabeçalho de tabela, tile secundário */
  --color-border: #D9D9DE;         /* divisor forte: fim de bloco */
  --color-border-soft: #E6E6EB;    /* borda de tile e card interno */
  --color-hairline: #ECECF1;       /* topo/rodapé de barra */
  --color-row-line: #F4F4F6;       /* linha de tabela */
  --radius-card: 14px;
  --shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05);

  /* Texto */
  --color-text: #1D1D1F;
  --color-text-secondary: #3F3F44;
  --color-text-muted: #6E6E73;
  --color-text-light: #86868B;

  /* Marca / ação */
  --color-primary: #2B56D4;        /* botão primário, link, valor ativo */
  --color-primary-dark: #1E3FA0;   /* hover de link */
  --color-accent: #3B6BF5;         /* sublinhado de aba ativa, série 1 */
  --color-primary-light: #EEF3FF;
  --color-chip-border: #C9D6F2;    /* chip de filtro ativo */

  /* Status de fonte / saúde (pontos de 9px) */
  --color-ok: #34C759;
  --color-warn: #FF9500;
  --color-bad: #FF3B30;

  /* Semânticas de número */
  --color-positive: #2D8F5F;       /* delta bom, meta atingida */
  --color-negative: #C13F3F;       /* delta ruim */
  --color-warning: #B45309;
  --color-badge-bg: #FEF3C7;       /* badge de pendência */
  --color-badge-fg: #92400E;
  --color-status-ok-bg: #DCFCE7;   /* badge "ativo" em tabela */

  /* Maturidade de cohort e de janela (barra .mat) */
  --color-maturity-fill: #8FB0EA;
  --color-maturity-track: #FFFFFF;
  --color-maturity-stripe: #DCE9F8;  /* hachura 45°, 4px/4px */
  --color-maturity-border: #C7C7CC;

  /* Controles */
  --radius-control: 8px;
  --radius-chip: 7px;
  --radius-pill: 999px;
  --color-control-bg: #F0F0F3;       /* botão neutro */
  --color-segmented-bg: #EDEDF0;     /* trilho do segmented */
  --shadow-segmented-on: 0 1px 3px rgba(0,0,0,.14);
  --color-bulkbar-bg: #1C2B4A;       /* barra escura de seleção em massa */

  /* Guia (onboarding) — ÚNICO token novo do sistema, por decisão da spec
     (ONBOARDING_TOUR_SPEC.md §2): a máscara do spotlight, derivada do navy
     #1C2B4A da barra de seleção em massa. Todo o resto do Guia reusa os
     tokens que já existem aqui. */
  --color-tour-mask: rgba(20,26,40,.44);

  /* Menu principal — lateral esquerda navy (27/07) */
  --color-sidenav-bg: #16233F;
  --color-sidenav-fg: #FFFFFF;
  --color-sidenav-fg-muted: rgba(255,255,255,.68);
  --color-sidenav-hover-bg: rgba(255,255,255,.07);
  --color-sidenav-active-bg: rgba(255,255,255,.11);
  --color-sidenav-hairline: rgba(255,255,255,.13);
  --w-sidenav: 13rem;        /* 208px em escala 1.0 */
  --w-sidenav-mini: 3.75rem; /*  60px */

  /* Teto da coluna de conteúdo (#page). Era 1240px fixo no shell.css até 28/07:
     acima de 1448px de janela (1300 com o menu reduzido) toda largura extra virava
     faixa branca, e o conteúdo útil ficava em 1192px tanto num monitor de 1280
     quanto num de 2560 — a tela não crescia, só a margem.
     1720px é o teto de hoje, valendo pras 6 mesas. Abaixo de 1448px ele nem chega a
     valer, então 1280 e o mobile são idênticos ao que eram. O teto continua
     existindo porque linha de tabela de 2400px não melhora a leitura: o olho passa
     a varrer, e o nome da campanha fica longe do número dele.
     Uma mesa que precise de outro teto sobrescreve só este token — não mexa no
     `max-width` do #page.
     ⟳ 28/07: virou rem pra andar junto com `--escala`. 107.5rem = 1720px em escala
     1.0 e ~1892px em 1.1 — que é a largura que o Hyuri viu no zoom 110% e aprovou. */
  --w-page-max: 107.5rem;

  /* Espaçamento — em rem pelo mesmo motivo do tipo: o zoom aumenta o respiro
     junto com a letra, e é assim que a tela "cresce" em vez de só engordar o texto. */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem;
  --pad-bar: 0.8125rem 1.25rem;      /* barra de topo (13px 20px em escala 1.0) */
  --pad-block: 0.625rem 0.875rem;    /* faixa de KPIs, filtros (10px 14px) */

  /* Tipo — papéis. Cada um aponta pra um degrau da escada acima; nenhum traz
     número próprio, senão a escada volta a ter exceção. */
  --text-label: 600 var(--fs-label)/1.3 var(--font-ui);   /* uppercase, +0.4px */
  --text-th: 600 var(--fs-label)/1.3 var(--font-ui);      /* uppercase, bg --color-card-soft */
  --text-table: 400 var(--fs-meta)/1.4 var(--font-ui);    /* tabela densa (D1, P1) */
  --text-body: 400 var(--fs-body)/1.45 var(--font-ui);
  --text-title: 600 var(--fs-md)/1.2 var(--font-ui);      /* título de tela na barra */
  --text-kpi: 400 var(--fs-md)/1.1 var(--font-num);       /* valor de tile na faixa de KPIs */
  --text-kpi-lg: 400 var(--fs-lg)/1.1 var(--font-num);    /* valor de destaque */
  --text-meta: 400 var(--fs-meta)/1.4 var(--font-ui);
  --text-control: 600 var(--fs-sm)/1.2 var(--font-ui);    /* botão, chip, select */
}

/* Séries múltiplas em gráficos (ordem de atribuição) */
:root {
  --chart-1: #3B6BF5; --chart-2: #22B07D; --chart-3: #8B5CF6;
  --chart-4: #F59E0B; --chart-5: #0EA5E9; --chart-6: #EC4899;
  --chart-7: #E5484D; --chart-8: #6366F1; --chart-9: #14B8A6;
  --chart-10: #F97316;
  --chart-fill-soft: #DCE4EF;   /* barras neutras */
  --chart-fill-area: #EEF3FF;   /* área sob a linha */
}

/* ── Aliases de compatibilidade (v1 → 2.0) ─────────────────────────────
   Páginas escritas na 1.0 ainda referenciam estes nomes. Cada mesa migrada
   para 2.0 troca pro nome canônico; quando a última migrar, este bloco morre. */
:root {
  --color-divider: var(--color-row-line);
  --color-surface: var(--color-card-soft);
  --color-positive-strong: var(--color-ok);
  --color-positive-bg: var(--color-status-ok-bg);
  --color-negative-strong: var(--color-bad);
  --color-negative-bg: #FEF2F2;
  --color-warning-strong: var(--color-warn);
  --color-warning-bg: #FFFBEB;
  --color-badge-amber-bg: var(--color-badge-bg);
  --color-badge-amber-fg: var(--color-badge-fg);
  --color-immature-mark: var(--color-text-light);
  --radius-badge: 5px;
  --text-widget-title: 600 12px/1.3 var(--font-ui);
}

/* Regras não-CSS (documentação):
   - Deltas: |Δ|<10% ocultar · 10–15% cor neutra · ≥15% positive/negative.
   - ROI: decimal (0,31), nunca percentual.
   - Números: sempre font-variant-numeric: tabular-nums; colunas de valor à direita.
   - Maturidade: hachura proporcional ao que falta fechar; célula imatura sem destaque.
   - Ícones: SVG stroke 1.3–1.4, currentColor. Sem emoji.
   - Reversibilidade: ↩ proposta · ⏱ desfazer em 30 dias · ≈ só compensável · – não se aplica.
   - Sem tinta de fundo em linha de tabela: status por ponto (ok/warn/bad) e texto. */