/* ─── Plataforma de Operação de Mídia Paga — Design Tokens (v1, 22/07/2026) ───
   Linguagem "7a executiva". Alinhado ao objeto C de RPT_UA_UNIFIED/lib/components.js. */

:root {
  /* Tipografia */
  --font-ui: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --font-num: 'IBM Plex Mono', ui-monospace, monospace; /* usar tabular-nums */

  /* Superfícies */
  --color-bg: #F6F7F9;
  --color-card: #FFFFFF;
  --color-border: #D5DAE3;
  --color-border-soft: #E2E6ED;
  --color-divider: #F0F2F6;

  /* Sidebar (operador) */
  --color-nav-bg: #1C2B4A;
  --color-nav-fg: #C7D0E0;
  --color-nav-fg-muted: #8FA0BD;
  --color-nav-active-bg: #2A3D63;
  --color-nav-active-accent: #4F7DF9;

  /* Texto */
  --color-text: #1B2130;
  --color-text-secondary: #3F4A5F;
  --color-text-muted: #6B7488;
  --color-text-light: #9BA3B5;

  /* Marca / ação */
  --color-primary: #3B6BF5;
  --color-primary-dark: #2A4FBF;
  --color-primary-light: #EEF3FF;

  /* Semânticas */
  --color-positive: #2D8F5F;      /* deltas bons, meta atingida */
  --color-positive-strong: #22B07D;
  --color-positive-bg: #DCFCE7;
  --color-negative: #C13F3F;      /* deltas ruins */
  --color-negative-strong: #E5484D; /* pausado, erro */
  --color-negative-bg: #FEF2F2;
  --color-warning: #B45309;
  --color-warning-strong: #F59E0B;
  --color-warning-bg: #FFFBEB;
  --color-badge-amber-bg: #FEF3C7;
  --color-badge-amber-fg: #92400E;

  /* Maturidade de cohort */
  --color-maturity-fill: #8FB0EA;     /* progresso da janela */
  --color-maturity-track: #FFFFFF;
  --color-maturity-stripe: #DCE9F8;   /* hachura da parte em formação */
  --color-maturity-border: #C7D0E0;
  --color-immature-mark: #9BA3B5;     /* "–" fora do cutoff */

  /* Escalas */
  --radius-card: 8px;
  --radius-control: 6px;
  --radius-badge: 5px;
  --shadow-card: 0 1px 4px rgba(0,0,0,.08);
  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px;

  /* Tipo — tamanhos */
  --text-label: 600 10px/1.3 var(--font-ui);   /* uppercase, letter-spacing .6px */
  --text-widget-title: 600 12px/1.3 var(--font-ui);
  --text-body: 400 13px/1.45 var(--font-ui);
  --text-meta: 400 10.5px/1.4 var(--font-ui);
  --text-kpi: 500 24px/1.1 var(--font-num);    /* tabular-nums */
  --text-table: 400 12.5px/1.4 var(--font-ui);
  --text-th: 600 10px/1.3 var(--font-ui);      /* uppercase, .4px, bg #F6F7F9 */
}

/* 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;
}

/* Regras não-CSS (documentação):
   - Deltas: |Δ|<10% ocultar · 10–15% cor neutra · ≥15% positive/negative.
   - ROI: decimal (0,31), cores relativas por janela (normalizar min/max).
   - Ícones: SVG stroke 1.3, 14×14, currentColor. Sem emojis.
   - Reversibilidade: ↩︎ reversível · ≈ compensável · ✕ irreversível (vermelho). */