/* =====================================================================
 * AFRY 2025 · Brand CSS · design tokens prontos para uso
 * Extraído de:
 *   - AFRY 2025 color palette.cclibs (40 swatches)
 *   - AFRY Branding Products Guideline.pptx
 *   - Reference Name.pptx · Apresentação2.pptx
 *   - DESIGN (OTF).zip · OFFICE (TTF).zip · Neue Campton family
 *
 * Uso:
 *   <link rel="stylesheet" href="brand-afry.css">
 *   ou copiar :root para dentro do <style> do mockup
 *
 * Convenção:
 *   --afry-{family}-{shade}  (família + escala 10..900, 500 = primário)
 *   --fs-{tier}              (tipografia)
 *   --space-{step}           (espaçamento 4px base unit)
 *   --r-{tier}               (border-radius)
 *
 * Versão: 1.0 · Maio 2026
 * ===================================================================== */

:root {
  /* ============================================================
     PRIMARY · MOSS GREEN — identidade principal AFRY
     Use: cabeçalhos, botões primários, accent visual de marca
     ============================================================ */
  --afry-moss-10:  #EBF7F0;  /* fundos suaves, hover sutis */
  --afry-moss-50:  #D0E7D9;  /* fundos de seção */
  --afry-moss-100: #A5C7B1;
  --afry-moss-200: #7BA88F;
  --afry-moss-300: #5D8B75;
  --afry-moss-400: #3E6452;
  --afry-moss-500: #244C3B;  /* ★ MOSS GREEN PRIMARY · cor-mãe AFRY */
  --afry-moss-600: #1D3F31;
  --afry-moss-700: #15332B;
  --afry-moss-800: #0E261B;  /* dark UI surfaces */
  --afry-moss-900: #0A1A11;  /* darkest, deep surfaces */

  /* ============================================================
     SUPPORTING · ALLOY TEAL — par cromático secundário
     Use: cards de apoio, charts secundários, info states
     ============================================================ */
  --afry-teal-10:  #EDF6F7;
  --afry-teal-50:  #D6EBED;
  --afry-teal-100: #BFDEE1;
  --afry-teal-200: #A6CFD6;
  --afry-teal-300: #81B4BC;
  --afry-teal-400: #709EA9;
  --afry-teal-500: #5F8E99;  /* ★ ALLOY TEAL PRIMARY · suporte principal */
  --afry-teal-600: #4C727A;
  --afry-teal-700: #3C5A61;
  --afry-teal-800: #2F474D;
  --afry-teal-900: #233438;

  /* ============================================================
     ACCENTS — uso PARCIMONIOSO (alertas, destaques pontuais)
     ⚠ NUNCA usar amarelo + coral juntos · NUNCA fundos grandes
     ============================================================ */
  --afry-yellow-bright: #F3FFAF;  /* ★ ACCENT pale yellow · highlight focal */
  --afry-coral-100:     #FFD6D6;  /* light pink — fundos suaves de alerta */
  --afry-coral-300:     #FF9D9D;  /* salmon */
  --afry-coral-400:     #FF7878;  /* ★ ACCENT coral · sinal de atenção */
  --afry-coral-700:     #A84249;  /* dark red — erros, danger states */
  --afry-coral-900:     #501B22;  /* burgundy — texto sobre coral light */

  /* ============================================================
     GREYSCALE & GREIGE — neutros estruturais
     ============================================================ */
  --afry-grey-100: #FAFAFA;  /* page background */
  --afry-grey-200: #F5F5F5;  /* card background */
  --afry-grey-300: #E5E5E5;  /* borders, dividers */
  --afry-grey-400: #CCCCCC;  /* disabled states */
  --afry-grey-500: #999999;  /* placeholder text, links visited */
  --afry-grey-600: #666666;  /* secondary text */
  --afry-grey-700: #444444;  /* primary text on light */
  --afry-grey-800: #2A2A2A;  /* dark surfaces */
  --afry-grey-900: #121212;  /* darkest text */
  --afry-greige:   #E9E6E0;  /* warm beige · alternativa às greys */

  /* ============================================================
     NEUTRAL — preto e branco puros
     ============================================================ */
  --afry-black: #000000;
  --afry-white: #FFFFFF;

  /* ============================================================
     SEMANTIC ALIASES — use estes em componentes (não os hex)
     Permite trocar de tema sem refatorar código
     ============================================================ */
  /* Controles nativos (select, input, date picker, scrollbar) seguem o tema
     do APP. Sem esta declaração o navegador usa o modo noturno do sistema
     operacional e mistura widgets escuros com a interface clara. */
  color-scheme: light;

  --color-bg:           var(--afry-white);
  --color-bg-soft:      var(--afry-grey-100);
  --color-bg-card:      var(--afry-white);
  --color-bg-elevated:  var(--afry-grey-200);
  --color-bg-section:   var(--afry-moss-10);

  --color-text:         var(--afry-grey-900);
  --color-text-soft:    var(--afry-grey-700);
  --color-text-mute:    var(--afry-grey-500);
  --color-text-invert:  var(--afry-white);

  --color-border:       var(--afry-grey-300);
  --color-border-strong:var(--afry-grey-400);
  --color-divider:      var(--afry-grey-300);

  --color-primary:      var(--afry-moss-500);
  --color-primary-hover:var(--afry-moss-600);
  --color-primary-soft: var(--afry-moss-50);
  --color-primary-text: var(--afry-white);

  --color-accent:       var(--afry-teal-500);
  --color-accent-hover: var(--afry-teal-600);
  --color-accent-soft:  var(--afry-teal-50);

  --color-success:      var(--afry-moss-400);
  --color-success-soft: var(--afry-moss-10);
  --color-warning:      #B8860B;  /* derivado · âmbar AFRY-like (gold/dark amber) */
  --color-warning-text: #8A6209;  /* âmbar escurecido p/ TEXTO (AA sobre fundo claro) */
  --color-warning-bg:   #F0BD24;  /* âmbar mais saturado para destaques */
  --color-warning-soft: #FFF4E0;
  --color-danger:       var(--afry-coral-700);
  --color-danger-soft:  var(--afry-coral-100);
  --color-info:         var(--afry-teal-600);
  --color-info-soft:    var(--afry-teal-50);
  --color-highlight:    var(--afry-yellow-bright);

  /* Status semânticos (mapping para palavras "RED/AMBER/GREEN") */
  --status-green:       var(--afry-moss-500);
  --status-green-bg:    var(--afry-moss-50);
  --status-amber:       #B8860B;
  --status-amber-bg:    #FEF3C7;
  --status-red:         var(--afry-coral-700);
  --status-red-bg:      var(--afry-coral-100);
  --status-blue:        var(--afry-teal-600);
  --status-blue-bg:     var(--afry-teal-50);

  /* ============================================================
     BRAND EMPHASIS — texto/ornamento de destaque que precisa
     INVERTER automaticamente por tema para garantir contraste
     ============================================================ */
  /* Light theme (default): emphasis = Moss escuro (legível em fundo claro) */
  --color-brand-emphasis:        var(--afry-moss-700);
  --color-brand-emphasis-strong: var(--afry-moss-800);
  --color-brand-emphasis-bg:     rgba(36,76,59,0.06);
  --color-brand-emphasis-border: rgba(36,76,59,0.20);
  /* Highlight bg fixo (yellow), texto adapta */
  --color-brand-highlight-bg:    var(--afry-yellow-bright);
  --color-brand-highlight-text:  var(--afry-moss-800);

  /* ============================================================
     TYPOGRAPHY — Neue Campton (RB Campton Neue)
     Fallback: Verdana → system-ui → sans-serif
     ============================================================ */
  --font-sans: "Neue Campton", "RB Campton Neue", Verdana, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* Type scale — convertido de pt para px (1pt ≈ 1.333px) */
  --fs-display: 80px;   /* 60pt — telas de cover */
  --fs-h1:      64px;   /* 48pt */
  --fs-h2:      40px;   /* 30pt */
  --fs-h3:      32px;   /* 24pt */
  --fs-h4:      24px;   /* 18pt */
  --fs-h5:      18px;   /* 14pt */
  --fs-body:    16px;   /* 12pt */
  --fs-small:   13px;   /* 10pt */
  --fs-micro:   11px;   /* 8pt — captions */

  /* Pesos disponíveis em Neue Campton */
  --fw-thin:        100;
  --fw-extralight:  200;
  --fw-light:       300;
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-extrabold:   800;
  --fw-black:       900;

  --lh-tight:   1.2;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  --ls-tight:   -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-caps:    0.08em;

  /* ============================================================
     SPACING — base unit 4px (consistente com slide grid AFRY)
     ============================================================ */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;

  --gutter:        24px;  /* gap entre colunas */
  --page-padding:  64px;  /* margem da página em desktop */
  --section-gap:   48px;  /* entre seções principais */

  /* ============================================================
     BORDERS — AFRY usa cantos angulosos (0–4px)
     Sem border-radius grandes (não pertence à marca)
     ============================================================ */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;     /* padrão para cards/botões */
  --r-3: 6px;     /* máximo · usar com moderação */
  --r-pill: 999px;

  --bw-thin:   1px;
  --bw-medium: 2px;
  --bw-thick:  3px;

  /* ============================================================
     ELEVATION — AFRY evita sombras (estética flat/clean)
     Quando necessário, sombras MUITO sutis
     ============================================================ */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(10,26,17,0.04);
  --elev-2: 0 2px 8px rgba(10,26,17,0.06);
  --elev-3: 0 8px 24px rgba(10,26,17,0.10);

  /* ============================================================
     ICONOGRAPHY — line icons, stroke 1.5-2px, multiplos de 4px
     ============================================================ */
  --icon-stroke:    1.75px;
  --icon-size-sm:   16px;
  --icon-size-md:   20px;
  --icon-size-lg:   24px;
  --icon-size-xl:   32px;

  /* ============================================================
     MOTION — transições rápidas e funcionais (sem bouncing)
     ============================================================ */
  --transition-fast: 150ms ease;
  --transition-med:  250ms ease;
  --transition-slow: 400ms ease;

  /* ============================================================
     LOGO ASSETS — paths para os arquivos oficiais AFRY
     Pasta: ./assets/logos/
     ⚠ AFRY usa SOMENTE variantes monocromáticas (preto/branco)
        Não existe versão "colorida" — é decisão de marca
     ============================================================ */
  --logo-primary-light:    url("./assets/logos/AFRY_Primary_Horizontal_RGB_Black.svg");  /* fundos claros */
  --logo-primary-dark:     url("./assets/logos/AFRY_Primary_Horizontal_RGB_White.svg");  /* fundos escuros */
  --logo-secondary-light:  url("./assets/logos/AFRY_Secondary_Vertical_RGB_Black.svg");  /* layouts quadrados */
  --logo-secondary-dark:   url("./assets/logos/AFRY_Secondary_Vertical_RGB_White.svg");
  --logo-symbol-light:     url("./assets/logos/AFRY_Symbol_RGB_Black.svg");              /* favicon, app icon */
  --logo-symbol-dark:      url("./assets/logos/AFRY_Symbol_RGB_White.svg");

  /* Tamanhos recomendados (mantém clear space mínimo de 1× altura do "A") */
  --logo-h-sm: 24px;   /* topbars compactos */
  --logo-h-md: 32px;   /* topbars padrão */
  --logo-h-lg: 48px;   /* heros, capas */
  --logo-h-xl: 80px;   /* landing pages, splashes */
  --logo-h-xxl: 160px; /* impressos, cover slides */

  /* ============================================================
     TABLE & GROUP HEADER TOKENS
     Use estes para cor de texto em thead, group-rows e topbar
     de cada view. Em temas escuros, os overrides abaixo aplicam.
     ============================================================ */
  --tbl-thead-bg:     var(--afry-moss-700);
  --tbl-thead-fg:     var(--afry-moss-50);
  --tbl-grp-0-bg:     var(--afry-moss-700);
  --tbl-grp-0-fg:     var(--afry-white);
  --tbl-grp-1-bg:     var(--afry-moss-800);
  --tbl-grp-1-fg:     var(--afry-grey-100);
  --tbl-grp-2-bg:     var(--afry-moss-900);
  --tbl-grp-2-fg:     var(--afry-grey-300);
  --tbl-topbar-bg:    var(--afry-moss-800);
  --tbl-topbar-fg:    var(--afry-white);
  --tbl-topbar-accent:var(--afry-teal-200);
}

/* =====================================================================
   SISTEMA DE TEMAS MULTI-FUNDO — nomeados por cor de marca
   Aplicar em <html data-theme="moss-900"> ou <body class="theme-moss-900">
   Default (sem data-theme) = tema light (white/grey-100 base)
   ===================================================================== */

/* ---------- Variáveis comuns para todos os temas ESCUROS ---------- */
[data-theme^="moss-"]:not([data-theme="moss-50"]):not([data-theme="moss-100"]),
[data-theme^="grey-7"], [data-theme^="grey-8"], [data-theme^="grey-9"],
[data-theme="dark"], [data-theme="bw-black"], [data-theme="dark-gray"],
.theme-moss-900, .theme-moss-800, .theme-moss-700, .theme-grey-900, .theme-grey-800,
.theme-dark, .theme-bw-black, .theme-dark-gray {
  /* Controles nativos (select, input, date picker, scrollbar) seguem o tema do
     APP — não o modo noturno do sistema operacional. */
  color-scheme: dark;

  --color-text:         var(--afry-grey-100);
  --color-text-soft:    var(--afry-grey-300);
  --color-text-mute:    var(--afry-grey-500);
  --color-text-invert:  var(--afry-grey-900);

  --color-primary:      var(--afry-moss-200);
  --color-primary-hover:var(--afry-moss-100);
  --color-primary-text: var(--afry-moss-900);

  --color-accent:       var(--afry-teal-200);
  --color-accent-hover: var(--afry-teal-100);

  --color-success:      var(--afry-moss-200);
  --color-warning:      #F0BD24;
  --color-warning-text: #F0BD24;
  --color-danger:       var(--afry-coral-300);
  --color-info:         var(--afry-teal-300);

  --status-green:       var(--afry-moss-200);
  --status-green-bg:    var(--afry-moss-800);
  --status-amber:       #F0BD24;
  --status-amber-bg:    rgba(240,189,36,0.15);
  --status-red:         var(--afry-coral-300);
  --status-red-bg:      rgba(168,66,73,0.20);
  --status-blue:        var(--afry-teal-300);
  --status-blue-bg:     var(--afry-teal-800);

  /* Brand emphasis INVERTE em temas escuros: usa yellow-bright */
  --color-brand-emphasis:        var(--afry-yellow-bright);
  --color-brand-emphasis-strong: var(--afry-yellow-bright);
  --color-brand-emphasis-bg:     rgba(243,255,175,0.08);
  --color-brand-emphasis-border: rgba(243,255,175,0.30);

  /* Table tokens em temas escuros */
  --tbl-thead-fg:     var(--afry-grey-100);
  --tbl-topbar-accent:var(--afry-teal-200);

  --elev-1: 0 1px 3px rgba(0,0,0,0.4);
  --elev-2: 0 4px 14px rgba(0,0,0,0.5);
  --elev-3: 0 10px 30px rgba(0,0,0,0.7);
}

/* ---------- TEMA: Moss-900 (deepest, para cockpits executivos) ---------- */
[data-theme="moss-900"], .theme-moss-900 {
  --color-bg:           var(--afry-moss-900);
  --color-bg-soft:      var(--afry-moss-800);
  --color-bg-card:      var(--afry-moss-800);
  --color-bg-elevated:  var(--afry-moss-700);
  --color-bg-section:   var(--afry-moss-700);
  --color-border:       var(--afry-moss-700);
  --color-border-strong:var(--afry-moss-600);
  --color-divider:      var(--afry-moss-700);
  --color-primary-soft: var(--afry-moss-700);
  --color-accent-soft:  var(--afry-teal-800);
  --color-success-soft: var(--afry-moss-800);
  --color-danger-soft:  var(--afry-coral-900);
  --color-info-soft:    var(--afry-teal-800);
}

/* ---------- TEMA: Moss-800 (mid-deep, balanceado) ---------- */
[data-theme="moss-800"], .theme-moss-800 {
  --color-bg:           var(--afry-moss-800);
  --color-bg-soft:      var(--afry-moss-700);
  --color-bg-card:      var(--afry-moss-700);
  --color-bg-elevated:  var(--afry-moss-600);
  --color-bg-section:   var(--afry-moss-700);
  --color-border:       var(--afry-moss-600);
  --color-border-strong:var(--afry-moss-500);
  --color-divider:      var(--afry-moss-600);
  --color-primary-soft: var(--afry-moss-600);
  --color-accent-soft:  var(--afry-teal-800);
  --color-success-soft: var(--afry-moss-700);
  --color-danger-soft:  var(--afry-coral-900);
  --color-info-soft:    var(--afry-teal-800);
}

/* ---------- TEMA: Moss-700 (atmospheric, para apresentações) ---------- */
[data-theme="moss-700"], .theme-moss-700 {
  --color-bg:           var(--afry-moss-700);
  --color-bg-soft:      var(--afry-moss-600);
  --color-bg-card:      var(--afry-moss-600);
  --color-bg-elevated:  var(--afry-moss-500);
  --color-bg-section:   var(--afry-moss-600);
  --color-border:       var(--afry-moss-500);
  --color-border-strong:var(--afry-moss-400);
  --color-divider:      var(--afry-moss-500);
  --color-primary:      var(--afry-moss-100);
  --color-primary-hover:var(--afry-moss-50);
  --color-primary-soft: var(--afry-moss-500);
  --color-text-soft:    var(--afry-grey-200);
  --color-accent-soft:  var(--afry-teal-700);
  --color-success-soft: var(--afry-moss-600);
  --color-danger-soft:  var(--afry-coral-900);
  --color-info-soft:    var(--afry-teal-700);
}

/* ---------- TEMA: Grey-900 (neutral noir, para foco máximo no conteúdo) ---------- */
[data-theme="grey-900"], .theme-grey-900 {
  --color-bg:           var(--afry-grey-900);
  --color-bg-soft:      var(--afry-grey-800);
  --color-bg-card:      var(--afry-grey-800);
  --color-bg-elevated:  var(--afry-grey-700);
  --color-bg-section:   var(--afry-grey-800);
  --color-border:       var(--afry-grey-700);
  --color-border-strong:var(--afry-grey-600);
  --color-divider:      var(--afry-grey-700);
  --color-primary-soft: var(--afry-grey-800);
  --color-accent-soft:  var(--afry-grey-800);
  --color-success-soft: var(--afry-grey-800);
  --color-danger-soft:  var(--afry-grey-800);
  --color-info-soft:    var(--afry-grey-800);
}

/* ---------- TEMA: Grey-800 (medium dark neutral) ---------- */
[data-theme="grey-800"], .theme-grey-800 {
  --color-bg:           var(--afry-grey-800);
  --color-bg-soft:      var(--afry-grey-700);
  --color-bg-card:      var(--afry-grey-700);
  --color-bg-elevated:  var(--afry-grey-600);
  --color-bg-section:   var(--afry-grey-700);
  --color-border:       var(--afry-grey-600);
  --color-border-strong:var(--afry-grey-500);
  --color-divider:      var(--afry-grey-600);
  --color-primary-soft: var(--afry-grey-700);
  --color-accent-soft:  var(--afry-grey-700);
  --color-success-soft: var(--afry-grey-700);
  --color-danger-soft:  var(--afry-grey-700);
  --color-info-soft:    var(--afry-grey-700);
}

/* ---------- TEMA: Greige (warm light, alternativa ao branco puro) ---------- */
[data-theme="greige"], .theme-greige {
  --color-bg:           var(--afry-greige);
  --color-bg-soft:      #F2F0EB;
  --color-bg-card:      var(--afry-white);
  --color-bg-elevated:  var(--afry-white);
  --color-bg-section:   var(--afry-moss-10);
  --color-border:       #D9D4CB;
  --color-border-strong:#BFB9AE;
  --color-divider:      #D9D4CB;
  /* Demais variáveis herdam do :root (light theme) */
}

/* ---------- TEMA: Light (default · explicit) ---------- */
[data-theme="light"], .theme-light {
  /* Igual ao :root padrão · este seletor existe apenas para reset explícito */
}

/* ---------- COMPATIBILIDADE: alias antigo "dark" → "moss-900" ---------- */
[data-theme="dark"], .theme-dark {
  --color-bg:           var(--afry-moss-900);
  --color-bg-soft:      var(--afry-moss-800);
  --color-bg-card:      var(--afry-moss-800);
  --color-bg-elevated:  var(--afry-moss-700);
  --color-bg-section:   var(--afry-moss-700);
  --color-border:       var(--afry-moss-700);
  --color-border-strong:var(--afry-moss-600);
  --color-divider:      var(--afry-moss-700);
  --color-primary-soft: var(--afry-moss-700);
}

/* =====================================================================
   BASE TYPOGRAPHY — opcional · aplica em todo body
   ===================================================================== */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

/* =====================================================================
   RODAPÉ FIXO — sempre visível na base da janela (contextual à tela).
   O conteúdo ganha padding-bottom para não ficar escondido atrás dele.
   ===================================================================== */
afry-footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
}
body { padding-bottom: 54px; }

h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin: 0 0 var(--space-5); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); line-height: var(--lh-tight); margin: 0 0 var(--space-4); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-tight); margin: 0 0 var(--space-4); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-medium);   line-height: var(--lh-tight); margin: 0 0 var(--space-3); }
h5 { font-size: var(--fs-h5); font-weight: var(--fw-medium);   line-height: var(--lh-normal); margin: 0 0 var(--space-2); }
p  { margin: 0 0 var(--space-4); line-height: var(--lh-normal); }

.eyebrow {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--color-text-mute);
}

.lead {
  font-size: var(--fs-h4);
  font-weight: var(--fw-light);
  line-height: var(--lh-loose);
  color: var(--color-text-soft);
}

/* =====================================================================
   COMPONENT PRIMITIVES — botões, cards, tags base
   ===================================================================== */
.btn-afry {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  border-radius: var(--r-2);
  border: var(--bw-medium) solid transparent;
  cursor: pointer;
  transition: var(--transition-fast);
}
.btn-afry-primary {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border-color: var(--color-primary);
}
.btn-afry-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn-afry-secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-afry-secondary:hover { background: var(--color-primary-soft); }

.card-afry {
  background: var(--color-bg-card);
  border: var(--bw-thin) solid var(--color-border);
  border-radius: var(--r-2);
  padding: var(--space-6);
  box-shadow: var(--elev-1);
}

.tag-afry {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  background: var(--afry-grey-200);
  color: var(--afry-grey-700);
}
.tag-afry.success { background: var(--color-success-soft); color: var(--color-success); }
.tag-afry.warning { background: var(--color-warning-soft); color: var(--color-warning); }
.tag-afry.danger  { background: var(--color-danger-soft);  color: var(--color-danger); }
.tag-afry.info    { background: var(--color-info-soft);    color: var(--color-info); }

/* =====================================================================
   LOGO UTILITIES — classes prontas para usar
   Uso:
     <span class="afry-logo afry-logo-h-md"></span>
     <span class="afry-logo afry-logo-vertical afry-logo-h-lg"></span>
     <span class="afry-logo afry-logo-symbol afry-logo-h-sm"></span>
   Em fundo escuro, adicionar .on-dark
   ===================================================================== */
.afry-logo {
  display: inline-block;
  background-image: var(--logo-primary-light);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  /* aspect ratio do logo horizontal: 1000:250 = 4:1 */
  aspect-ratio: 4 / 1;
  height: var(--logo-h-md);
  width: auto;
  /* fallback se aspect-ratio não for suportado */
  min-width: calc(var(--logo-h-md) * 4);
}
.afry-logo.on-dark { background-image: var(--logo-primary-dark); }

.afry-logo-vertical {
  background-image: var(--logo-secondary-light);
  /* aspect ratio vertical: 700:500 = 1.4:1 */
  aspect-ratio: 1.4 / 1;
  min-width: calc(var(--logo-h-md) * 1.4);
}
.afry-logo-vertical.on-dark { background-image: var(--logo-secondary-dark); }

.afry-logo-symbol {
  background-image: var(--logo-symbol-light);
  /* aspect ratio symbol: 500:500 = 1:1 */
  aspect-ratio: 1 / 1;
  min-width: var(--logo-h-md);
}
.afry-logo-symbol.on-dark { background-image: var(--logo-symbol-dark); }

/* Tamanhos */
.afry-logo-h-sm  { height: var(--logo-h-sm) }
.afry-logo-h-md  { height: var(--logo-h-md) }
.afry-logo-h-lg  { height: var(--logo-h-lg) }
.afry-logo-h-xl  { height: var(--logo-h-xl) }
.afry-logo-h-xxl { height: var(--logo-h-xxl) }

/* Lockup "AFRY {produto}" — master-brand approach */
.afry-lockup {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-sans);
}
.afry-lockup-divider {
  width: 1px;
  background: currentColor;
  opacity: 0.4;
  align-self: stretch;
  margin: 4px 0;
}
.afry-lockup-product {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
}
.afry-lockup-product small {
  display: block;
  font-size: 11px;
  font-weight: var(--fw-regular);
  opacity: 0.7;
  margin-top: 2px;
}

/* =====================================================================
   PRINCÍPIOS DA MARCA AFRY (lembretes para implementação)
   ===================================================================== */
/*
 * 1. Moss Green é a cor-mãe — qualquer tela deve ter pelo menos 1 elemento Moss
 * 2. Hierarquia visual de cor: Moss > Teal > Greys > Accents (raros)
 * 3. Yellow e Coral são SINAIS — nunca fundos grandes, nunca juntos
 * 4. Cantos: 0-4px de radius máximo (a marca é angular, não arredondada)
 * 5. Sombras: mínimas ou ausentes (estética clean/flat)
 * 6. Tipografia: Neue Campton em todo lado · sem mistura de fontes
 * 7. Espaçamento: grid de 4px · gutters de 24px · padding de página 64px
 * 8. Ícones: linha 1.5-2px, multiplos de 4px de tamanho
 * 9. Logo "AFRY {nome do produto}" · um espaço · capitalização normal
 * 10. Versão escura usa Moss-900 como background, Moss-200 como primário
 */

/* ============================================== */
/* Cross-links system                             */
/* ============================================== */
.xref-link {
  color: var(--afry-moss-700, #1a3a2e);
  text-decoration: none;
  background: var(--afry-yellow-50, rgba(251,191,36,.15));
  padding: 1px 4px;
  border-radius: 3px;
  font-family: ui-monospace, monospace;
  font-size: .92em;
  font-weight: 600;
  border-bottom: 1px dashed var(--afry-moss-700, #1a3a2e);
  transition: background .12s;
}
.xref-link:hover {
  background: var(--afry-yellow-bright, #fbbf24);
  text-decoration: none;
}
.xref-link.xref-broken {
  color: #94a3b8;
  background: #f1f5f9;
  border-bottom-color: #94a3b8;
  text-decoration: line-through;
}

@keyframes xrefHighlightPulse {
  0%   { background: rgba(251,191,36,.6); box-shadow: 0 0 0 4px rgba(251,191,36,.3); }
  50%  { background: rgba(251,191,36,.4); box-shadow: 0 0 0 8px rgba(251,191,36,.15); }
  100% { background: rgba(251,191,36,.0); box-shadow: 0 0 0 0 transparent; }
}
.xref-highlight {
  animation: xrefHighlightPulse 2.5s ease-out;
  border-radius: 4px;
  padding: 2px 4px;
}


/* =====================================================================
 * CHART PALETTES · Camada 1 · paletas canônicas para gráficos
 * ---------------------------------------------------------------------
 * Design philosophy (Maio 2026):
 *
 *   TODAS as cores derivam de tokens AFRY existentes (var(--afry-*)).
 *   Nenhum hex hardcoded · alterar um token propaga por todos os temas.
 *
 *   11 temas pré-prontos · cada um com:
 *     - 12 cores categóricas (--chart-cat-1 ... --chart-cat-12)
 *       ordenadas para máximo contraste de matiz+luminância entre vizinhas
 *     - 5 sequenciais (--chart-seq-1 ... --chart-seq-5) low→high
 *     - 3 divergentes (--chart-div-neg/mid/pos) com centro neutro
 *     - 5 aliases semânticos (success/warning/danger/info/neutral)
 *
 *   Princípios de ordenação categórica (testados visualmente):
 *     1) Verde primário (cor-mãe AFRY) sempre ocupa cat-1 onde aplicável
 *     2) Vizinhas alternam temperatura (frio/quente) para distinção
 *     3) Saturação alta primeiro · pastéis no final (gráficos pequenos)
 *     4) Categórica 7-12 já é "long tail" · usar saturações menores
 *
 *   Acessibilidade (WCAG 2.1 + Color Universal Design):
 *     - Tema 'safe-cb' usa pares deutero/proto-safe (verde+coral+yellow)
 *     - Divergentes NÃO usam red+green sozinhos (problema p/ daltônicos)
 *       · usa yellow ou teal como tom de contraste auxiliar
 *
 *   Como usar:
 *     <html data-chart-theme="brand">             (default)
 *     <html data-chart-theme="warm">              (relatórios executivos)
 *     <html data-chart-theme="cool">              (análise técnica)
 *     <html data-chart-theme="safe-cb">           (acessibilidade)
 *     <html data-chart-theme="mono-moss">         (impressão monocromática)
 *     ...
 *
 *   Em JS (descoberta dinâmica):
 *     import { colorAt, listThemes, setTheme } from './lib/chart-palette.js';
 *     colorAt(0)         → resolve var(--chart-cat-1) do tema atual
 *     listThemes()       → ['brand','warm','cool',...] descoberto via DOM
 *     setTheme('warm')   → troca o data-chart-theme do <html>
 *
 * Tokens AFRY usados (NUNCA hex direto):
 *   --afry-moss-10/50/100/200/300/400/500/600/700/800/900
 *   --afry-teal-10/50/100/200/300/400/500/600/700/800/900
 *   --afry-coral-100/300/400/700/900
 *   --afry-yellow-bright
 *   --afry-greige
 *   --afry-grey-100/200/300/400/500/600/700/800/900
 *   --color-warning-bg (amber derivado #F0BD24)
 *   --color-warning    (gold derivado #B8860B)
 * ===================================================================== */

/* ─────────────────────────────────────────────────────────────────
 * TEMA: brand (DEFAULT)
 * Filosofia: equilíbrio Moss + Teal + Coral · representa a marca
 * Bom para: dashboards gerais, KPIs, relatórios padrão
 * ───────────────────────────────────────────────────────────────── */
:root,
:root[data-chart-theme="brand"] {
  /* Categóricas · alternância matiz (verde→teal→coral→amarelo→...) */
  --chart-cat-1:  var(--afry-moss-500);     /* verde primário · âncora AFRY */
  --chart-cat-2:  var(--afry-teal-500);     /* teal · contraste matiz */
  --chart-cat-3:  var(--afry-coral-400);    /* coral quente · alto contraste */
  --chart-cat-4:  var(--afry-yellow-bright);/* amarelo pálido · brilho */
  --chart-cat-5:  var(--afry-moss-300);     /* verde claro · variação saturação */
  --chart-cat-6:  var(--afry-teal-700);     /* teal escuro · profundidade */
  --chart-cat-7:  var(--afry-coral-700);    /* burgundy · escuro+quente */
  --chart-cat-8:  var(--afry-greige);       /* bege neutro · tom warm soft */
  --chart-cat-9:  var(--afry-moss-700);     /* verde muito escuro */
  --chart-cat-10: var(--afry-teal-300);     /* teal claro */
  --chart-cat-11: var(--afry-coral-300);    /* salmão claro */
  --chart-cat-12: var(--afry-grey-500);     /* cinza médio · neutro fallback */

  /* Sequenciais · gradiente moss · use para mapeamentos low→high */
  --chart-seq-1:  var(--afry-moss-50);
  --chart-seq-2:  var(--afry-moss-200);
  --chart-seq-3:  var(--afry-moss-400);
  --chart-seq-4:  var(--afry-moss-600);
  --chart-seq-5:  var(--afry-moss-900);

  /* Divergentes · vermelho-verde clássico · centro neutro */
  --chart-div-neg: var(--afry-coral-700);
  --chart-div-mid: var(--afry-grey-300);
  --chart-div-pos: var(--afry-moss-500);

  /* Semânticos */
  --chart-success: var(--afry-moss-500);
  --chart-warning: var(--color-warning-bg);
  --chart-danger:  var(--afry-coral-700);
  --chart-info:    var(--afry-teal-600);
  --chart-neutral: var(--afry-grey-500);
  --chart-accent: var(--afry-teal-500);
  --chart-accent: var(--afry-teal-500);
}

/* ─────────────────────────────────────────────────────────────────
 * TEMA: warm
 * Filosofia: predominância de coral/amarelo/amber · alta energia
 * Bom para: dashboards executivos, reports comerciais, "destaques"
 * Cuidado: cansa em uso prolongado · evitar para análise diária
 * ───────────────────────────────────────────────────────────────── */
:root[data-chart-theme="warm"] {
  --chart-cat-1:  var(--afry-coral-400);    /* coral primário */
  --chart-cat-2:  var(--afry-yellow-bright);/* amarelo */
  --chart-cat-3:  var(--afry-coral-700);    /* burgundy escuro */
  --chart-cat-4:  var(--color-warning-bg);  /* amber saturado */
  --chart-cat-5:  var(--afry-greige);       /* bege */
  --chart-cat-6:  var(--afry-coral-900);    /* burgundy mais escuro */
  --chart-cat-7:  var(--afry-coral-300);    /* salmão */
  --chart-cat-8:  var(--color-warning);     /* gold (#B8860B) */
  --chart-cat-9:  var(--afry-moss-700);     /* verde escuro contraste */
  --chart-cat-10: var(--afry-coral-100);    /* rosa claro */
  --chart-cat-11: var(--afry-teal-700);     /* teal contraste frio */
  --chart-cat-12: var(--afry-grey-700);     /* cinza escuro */

  --chart-seq-1:  var(--afry-coral-100);
  --chart-seq-2:  var(--afry-coral-300);
  --chart-seq-3:  var(--afry-coral-400);
  --chart-seq-4:  var(--afry-coral-700);
  --chart-seq-5:  var(--afry-coral-900);

  --chart-div-neg: var(--afry-teal-700);    /* frio = negativo (inversão simbólica) */
  --chart-div-mid: var(--afry-greige);
  --chart-div-pos: var(--afry-coral-400);   /* quente = positivo */

  --chart-success: var(--afry-coral-400);
  --chart-warning: var(--color-warning-bg);
  --chart-danger:  var(--afry-coral-900);
  --chart-info:    var(--afry-teal-600);
  --chart-neutral: var(--afry-greige);
  --chart-accent: var(--afry-coral-700);
}

/* ─────────────────────────────────────────────────────────────────
 * TEMA: cool
 * Filosofia: predominância de teal/moss + greys · baixa fadiga visual
 * Bom para: análise técnica, dashboards de monitoramento, painéis 24/7
 * ───────────────────────────────────────────────────────────────── */
:root[data-chart-theme="cool"] {
  --chart-cat-1:  var(--afry-teal-500);
  --chart-cat-2:  var(--afry-moss-500);
  --chart-cat-3:  var(--afry-teal-700);
  --chart-cat-4:  var(--afry-moss-700);
  --chart-cat-5:  var(--afry-teal-300);
  --chart-cat-6:  var(--afry-moss-300);
  --chart-cat-7:  var(--afry-teal-900);
  --chart-cat-8:  var(--afry-moss-900);
  --chart-cat-9:  var(--afry-grey-600);
  --chart-cat-10: var(--afry-teal-100);
  --chart-cat-11: var(--afry-moss-100);
  --chart-cat-12: var(--afry-grey-400);

  --chart-seq-1:  var(--afry-teal-10);
  --chart-seq-2:  var(--afry-teal-200);
  --chart-seq-3:  var(--afry-teal-500);
  --chart-seq-4:  var(--afry-teal-700);
  --chart-seq-5:  var(--afry-teal-900);

  --chart-div-neg: var(--afry-coral-700);
  --chart-div-mid: var(--afry-grey-200);
  --chart-div-pos: var(--afry-teal-500);

  --chart-success: var(--afry-moss-500);
  --chart-warning: var(--color-warning);
  --chart-danger:  var(--afry-coral-700);
  --chart-info:    var(--afry-teal-500);
  --chart-neutral: var(--afry-grey-500);
  --chart-accent: var(--afry-teal-700);
}

/* ─────────────────────────────────────────────────────────────────
 * TEMA: earth
 * Filosofia: tons naturais · ESG, sustentabilidade, "earthy"
 * Mix de moss, greige, burgundy, gold · paleta orgânica
 * ───────────────────────────────────────────────────────────────── */
:root[data-chart-theme="earth"] {
  --chart-cat-1:  var(--afry-moss-500);
  --chart-cat-2:  var(--afry-greige);
  --chart-cat-3:  var(--afry-coral-700);    /* burgundy · "terra" */
  --chart-cat-4:  var(--color-warning);     /* gold */
  --chart-cat-5:  var(--afry-moss-700);     /* verde-floresta */
  --chart-cat-6:  var(--afry-coral-400);    /* terracota */
  --chart-cat-7:  var(--afry-teal-700);     /* azul-petróleo */
  --chart-cat-8:  var(--afry-moss-200);     /* sage */
  --chart-cat-9:  var(--afry-coral-300);    /* salmão suave */
  --chart-cat-10: var(--afry-grey-600);
  --chart-cat-11: var(--afry-moss-50);
  --chart-cat-12: var(--afry-yellow-bright);

  --chart-seq-1:  var(--afry-moss-50);
  --chart-seq-2:  var(--afry-greige);
  --chart-seq-3:  var(--afry-moss-400);
  --chart-seq-4:  var(--afry-coral-700);
  --chart-seq-5:  var(--afry-coral-900);

  --chart-div-neg: var(--afry-coral-700);
  --chart-div-mid: var(--afry-greige);
  --chart-div-pos: var(--afry-moss-500);

  --chart-success: var(--afry-moss-500);
  --chart-warning: var(--color-warning);
  --chart-danger:  var(--afry-coral-700);
  --chart-info:    var(--afry-teal-700);
  --chart-neutral: var(--afry-greige);
  --chart-accent: var(--afry-moss-600);
}

/* ─────────────────────────────────────────────────────────────────
 * TEMA: bold
 * Filosofia: máxima saturação · presentations, hero charts
 * Use SOMENTE em telas grandes · cansa em uso prolongado
 * ───────────────────────────────────────────────────────────────── */
:root[data-chart-theme="bold"] {
  --chart-cat-1:  var(--afry-coral-700);
  --chart-cat-2:  var(--afry-moss-500);
  --chart-cat-3:  var(--afry-teal-700);
  --chart-cat-4:  var(--afry-yellow-bright);
  --chart-cat-5:  var(--afry-coral-400);
  --chart-cat-6:  var(--afry-moss-800);
  --chart-cat-7:  var(--afry-teal-900);
  --chart-cat-8:  var(--afry-coral-900);
  --chart-cat-9:  var(--color-warning);
  --chart-cat-10: var(--afry-moss-700);
  --chart-cat-11: var(--afry-teal-500);
  --chart-cat-12: var(--afry-grey-800);

  --chart-seq-1:  var(--afry-grey-200);
  --chart-seq-2:  var(--afry-moss-300);
  --chart-seq-3:  var(--afry-moss-500);
  --chart-seq-4:  var(--afry-moss-700);
  --chart-seq-5:  var(--afry-moss-900);

  --chart-div-neg: var(--afry-coral-900);
  --chart-div-mid: var(--afry-yellow-bright);
  --chart-div-pos: var(--afry-moss-700);

  --chart-success: var(--afry-moss-700);
  --chart-warning: var(--color-warning-bg);
  --chart-danger:  var(--afry-coral-900);
  --chart-info:    var(--afry-teal-700);
  --chart-neutral: var(--afry-grey-700);
  --chart-accent: var(--afry-coral-600);
}

/* ─────────────────────────────────────────────────────────────────
 * TEMA: pastel
 * Filosofia: baixa saturação · documentos impressos, relatórios long-read
 * Reduz fadiga · ideal para múltiplos charts na mesma página
 * ───────────────────────────────────────────────────────────────── */
:root[data-chart-theme="pastel"] {
  --chart-cat-1:  var(--afry-moss-100);
  --chart-cat-2:  var(--afry-teal-100);
  --chart-cat-3:  var(--afry-coral-100);
  --chart-cat-4:  var(--afry-yellow-bright);
  --chart-cat-5:  var(--afry-greige);
  --chart-cat-6:  var(--afry-moss-200);
  --chart-cat-7:  var(--afry-teal-200);
  --chart-cat-8:  var(--afry-coral-300);
  --chart-cat-9:  var(--afry-moss-50);
  --chart-cat-10: var(--afry-teal-50);
  --chart-cat-11: var(--afry-grey-300);
  --chart-cat-12: var(--afry-grey-200);

  --chart-seq-1:  var(--afry-moss-10);
  --chart-seq-2:  var(--afry-moss-50);
  --chart-seq-3:  var(--afry-moss-100);
  --chart-seq-4:  var(--afry-moss-200);
  --chart-seq-5:  var(--afry-moss-400);

  --chart-div-neg: var(--afry-coral-300);
  --chart-div-mid: var(--afry-grey-100);
  --chart-div-pos: var(--afry-moss-200);

  --chart-success: var(--afry-moss-200);
  --chart-warning: var(--afry-yellow-bright);
  --chart-danger:  var(--afry-coral-300);
  --chart-info:    var(--afry-teal-100);
  --chart-neutral: var(--afry-grey-200);
  --chart-accent: var(--afry-teal-300);
}

/* ─────────────────────────────────────────────────────────────────
 * TEMA: mono-moss
 * Filosofia: monocromático verde · hierarquia clara, impressão B&W friendly
 * Distinção por luminância apenas · ideal para 1-5 séries com ordem natural
 * ───────────────────────────────────────────────────────────────── */
:root[data-chart-theme="mono-moss"] {
  --chart-cat-1:  var(--afry-moss-900);
  --chart-cat-2:  var(--afry-moss-700);
  --chart-cat-3:  var(--afry-moss-500);
  --chart-cat-4:  var(--afry-moss-300);
  --chart-cat-5:  var(--afry-moss-200);
  --chart-cat-6:  var(--afry-moss-100);
  --chart-cat-7:  var(--afry-moss-50);
  --chart-cat-8:  var(--afry-moss-800);
  --chart-cat-9:  var(--afry-moss-600);
  --chart-cat-10: var(--afry-moss-400);
  --chart-cat-11: var(--afry-grey-400);
  --chart-cat-12: var(--afry-grey-200);

  --chart-seq-1:  var(--afry-moss-50);
  --chart-seq-2:  var(--afry-moss-200);
  --chart-seq-3:  var(--afry-moss-500);
  --chart-seq-4:  var(--afry-moss-700);
  --chart-seq-5:  var(--afry-moss-900);

  --chart-div-neg: var(--afry-grey-200);
  --chart-div-mid: var(--afry-greige);
  --chart-div-pos: var(--afry-moss-700);

  --chart-success: var(--afry-moss-500);
  --chart-warning: var(--afry-moss-300);
  --chart-danger:  var(--afry-moss-900);
  --chart-info:    var(--afry-moss-600);
  --chart-neutral: var(--afry-grey-400);
  --chart-accent: var(--afry-moss-600);
}

/* ─────────────────────────────────────────────────────────────────
 * TEMA: mono-teal
 * Filosofia: monocromático teal · análise técnica, "blue ocean"
 * ───────────────────────────────────────────────────────────────── */
:root[data-chart-theme="mono-teal"] {
  --chart-cat-1:  var(--afry-teal-900);
  --chart-cat-2:  var(--afry-teal-700);
  --chart-cat-3:  var(--afry-teal-500);
  --chart-cat-4:  var(--afry-teal-300);
  --chart-cat-5:  var(--afry-teal-200);
  --chart-cat-6:  var(--afry-teal-100);
  --chart-cat-7:  var(--afry-teal-50);
  --chart-cat-8:  var(--afry-teal-800);
  --chart-cat-9:  var(--afry-teal-600);
  --chart-cat-10: var(--afry-teal-400);
  --chart-cat-11: var(--afry-grey-400);
  --chart-cat-12: var(--afry-grey-200);

  --chart-seq-1:  var(--afry-teal-50);
  --chart-seq-2:  var(--afry-teal-200);
  --chart-seq-3:  var(--afry-teal-500);
  --chart-seq-4:  var(--afry-teal-700);
  --chart-seq-5:  var(--afry-teal-900);

  --chart-div-neg: var(--afry-grey-200);
  --chart-div-mid: var(--afry-greige);
  --chart-div-pos: var(--afry-teal-700);

  --chart-success: var(--afry-teal-500);
  --chart-warning: var(--afry-teal-300);
  --chart-danger:  var(--afry-teal-900);
  --chart-info:    var(--afry-teal-600);
  --chart-neutral: var(--afry-grey-400);
  --chart-accent: var(--afry-teal-700);
}

/* ─────────────────────────────────────────────────────────────────
 * TEMA: mono-coral
 * Filosofia: monocromático coral · destaques quentes, urgência sutil
 * ───────────────────────────────────────────────────────────────── */
:root[data-chart-theme="mono-coral"] {
  --chart-cat-1:  var(--afry-coral-900);
  --chart-cat-2:  var(--afry-coral-700);
  --chart-cat-3:  var(--afry-coral-400);
  --chart-cat-4:  var(--afry-coral-300);
  --chart-cat-5:  var(--afry-coral-100);
  --chart-cat-6:  var(--afry-greige);
  --chart-cat-7:  var(--afry-grey-300);
  --chart-cat-8:  var(--afry-grey-500);
  --chart-cat-9:  var(--afry-grey-700);
  --chart-cat-10: var(--color-warning);
  --chart-cat-11: var(--color-warning-bg);
  --chart-cat-12: var(--afry-yellow-bright);

  --chart-seq-1:  var(--afry-coral-100);
  --chart-seq-2:  var(--afry-coral-300);
  --chart-seq-3:  var(--afry-coral-400);
  --chart-seq-4:  var(--afry-coral-700);
  --chart-seq-5:  var(--afry-coral-900);

  --chart-div-neg: var(--afry-grey-200);
  --chart-div-mid: var(--afry-greige);
  --chart-div-pos: var(--afry-coral-700);

  --chart-success: var(--afry-coral-400);
  --chart-warning: var(--color-warning-bg);
  --chart-danger:  var(--afry-coral-900);
  --chart-info:    var(--afry-coral-300);
  --chart-neutral: var(--afry-grey-400);
  --chart-accent: var(--afry-coral-700);
}

/* ─────────────────────────────────────────────────────────────────
 * TEMA: safe-cb
 * Filosofia: Color-blindness friendly · aproximação Okabe-Ito adaptada
 * Pares deutero/proto-safe · combina matiz + luminância para distinção
 * Bom para: relatórios públicos, dashboards multi-audience
 * ───────────────────────────────────────────────────────────────── */
:root[data-chart-theme="safe-cb"] {
  /* Pares com luminância distinta entre vizinhas (resiste a daltonismos) */
  --chart-cat-1:  var(--afry-moss-700);     /* verde muito escuro */
  --chart-cat-2:  var(--afry-yellow-bright);/* amarelo · sempre distinguível */
  --chart-cat-3:  var(--afry-teal-500);     /* teal médio */
  --chart-cat-4:  var(--afry-coral-700);    /* burgundy · luminância única */
  --chart-cat-5:  var(--afry-grey-700);     /* cinza escuro */
  --chart-cat-6:  var(--afry-moss-300);     /* verde claro · distância luminance */
  --chart-cat-7:  var(--afry-coral-300);    /* salmão · distância matiz */
  --chart-cat-8:  var(--afry-teal-900);     /* teal muito escuro */
  --chart-cat-9:  var(--afry-greige);       /* bege */
  --chart-cat-10: var(--afry-moss-900);
  --chart-cat-11: var(--afry-coral-900);
  --chart-cat-12: var(--afry-grey-300);

  --chart-seq-1:  var(--afry-teal-50);
  --chart-seq-2:  var(--afry-teal-200);
  --chart-seq-3:  var(--afry-teal-500);
  --chart-seq-4:  var(--afry-teal-700);
  --chart-seq-5:  var(--afry-teal-900);

  /* Divergente CB-safe: yellow ↔ teal (evita red/green) */
  --chart-div-neg: var(--color-warning-bg);
  --chart-div-mid: var(--afry-grey-200);
  --chart-div-pos: var(--afry-teal-700);

  --chart-success: var(--afry-moss-700);
  --chart-warning: var(--color-warning-bg);
  --chart-danger:  var(--afry-coral-700);
  --chart-info:    var(--afry-teal-700);
  --chart-neutral: var(--afry-grey-500);
  --chart-accent: var(--afry-teal-600);
}

/* ─────────────────────────────────────────────────────────────────
 * TEMA: executive
 * Filosofia: premium · preto, ouro, vinho · alta gerência, sponsor
 * Cores associadas a luxury/finance · ideal para diretoria
 * ───────────────────────────────────────────────────────────────── */
:root[data-chart-theme="executive"] {
  --chart-cat-1:  var(--afry-grey-900);     /* preto profundo */
  --chart-cat-2:  var(--color-warning);     /* ouro */
  --chart-cat-3:  var(--afry-coral-900);    /* vinho/burgundy */
  --chart-cat-4:  var(--afry-moss-700);     /* verde floresta */
  --chart-cat-5:  var(--afry-grey-700);     /* graphite */
  --chart-cat-6:  var(--afry-greige);       /* champagne */
  --chart-cat-7:  var(--afry-teal-700);     /* navy */
  --chart-cat-8:  var(--afry-coral-700);    /* cobre */
  --chart-cat-9:  var(--afry-moss-500);
  --chart-cat-10: var(--afry-grey-500);
  --chart-cat-11: var(--afry-yellow-bright);
  --chart-cat-12: var(--afry-grey-300);

  --chart-seq-1:  var(--afry-greige);
  --chart-seq-2:  var(--color-warning-bg);
  --chart-seq-3:  var(--color-warning);
  --chart-seq-4:  var(--afry-coral-900);
  --chart-seq-5:  var(--afry-grey-900);

  --chart-div-neg: var(--afry-coral-900);
  --chart-div-mid: var(--afry-greige);
  --chart-div-pos: var(--color-warning);

  --chart-success: var(--afry-moss-700);
  --chart-warning: var(--color-warning);
  --chart-danger:  var(--afry-coral-900);
  --chart-info:    var(--afry-teal-700);
  --chart-neutral: var(--afry-grey-700);
  --chart-accent: var(--afry-moss-700);
}

/* =====================================================================
 * CONTEXT THEMES (futuro) · cada módulo pode ter seu tema padrão
 * via [data-module="engineering-tracker"][data-chart-theme="..."]
 * Por enquanto vazio · sirva como referência da extensibilidade.
 * ===================================================================== */


/* =====================================================================
 * PILL TOKENS · backgrounds light + foreground para badges de status
 * ---------------------------------------------------------------------
 * Derivados dos tokens semânticos de chart · mantêm consistência visual
 * NÃO usa hex hardcoded · só var(--chart-*) e var(--afry-*)
 * ===================================================================== */
:root,
:root[data-chart-theme="brand"] {
  --pill-success-bg: var(--afry-moss-50);
  --pill-success-fg: var(--afry-moss-700);
  --pill-info-bg:    var(--afry-teal-50);
  --pill-info-fg:    var(--afry-teal-700);
  --pill-warning-bg: var(--afry-yellow-bright);
  --pill-warning-fg: var(--afry-coral-900);
  --pill-danger-bg:  var(--afry-coral-100);
  --pill-danger-fg:  var(--afry-coral-700);
  --pill-neutral-bg: var(--afry-grey-200);
  --pill-neutral-fg: var(--afry-grey-700);
  --pill-accent-bg:  var(--afry-yellow-bright);
  --pill-accent-fg:  var(--afry-moss-800);
}
:root[data-chart-theme="warm"] {
  --pill-success-bg: var(--afry-coral-100);
  --pill-success-fg: var(--afry-coral-700);
  --pill-info-bg:    var(--afry-teal-50);
  --pill-info-fg:    var(--afry-teal-700);
  --pill-warning-bg: var(--afry-yellow-bright);
  --pill-warning-fg: var(--afry-coral-900);
  --pill-danger-bg:  var(--afry-coral-100);
  --pill-danger-fg:  var(--afry-coral-900);
  --pill-neutral-bg: var(--afry-greige);
  --pill-neutral-fg: var(--afry-grey-700);
  --pill-accent-bg:  var(--afry-coral-100);
  --pill-accent-fg:  var(--afry-coral-700);
}
:root[data-chart-theme="cool"] {
  --pill-success-bg: var(--afry-moss-50);
  --pill-success-fg: var(--afry-moss-700);
  --pill-info-bg:    var(--afry-teal-50);
  --pill-info-fg:    var(--afry-teal-700);
  --pill-warning-bg: var(--afry-yellow-bright);
  --pill-warning-fg: var(--color-warning);
  --pill-danger-bg:  var(--afry-coral-100);
  --pill-danger-fg:  var(--afry-coral-700);
  --pill-neutral-bg: var(--afry-grey-200);
  --pill-neutral-fg: var(--afry-grey-700);
  --pill-accent-bg:  var(--afry-teal-50);
  --pill-accent-fg:  var(--afry-teal-700);
}
:root[data-chart-theme="earth"] {
  --pill-success-bg: var(--afry-moss-50);
  --pill-success-fg: var(--afry-moss-700);
  --pill-info-bg:    var(--afry-teal-50);
  --pill-info-fg:    var(--afry-teal-700);
  --pill-warning-bg: var(--afry-yellow-bright);
  --pill-warning-fg: var(--color-warning);
  --pill-danger-bg:  var(--afry-coral-100);
  --pill-danger-fg:  var(--afry-coral-700);
  --pill-neutral-bg: var(--afry-greige);
  --pill-neutral-fg: var(--afry-grey-700);
  --pill-accent-bg:  var(--afry-greige);
  --pill-accent-fg:  var(--afry-moss-800);
}
:root[data-chart-theme="bold"] {
  --pill-success-bg: var(--afry-moss-100);
  --pill-success-fg: var(--afry-moss-900);
  --pill-info-bg:    var(--afry-teal-100);
  --pill-info-fg:    var(--afry-teal-900);
  --pill-warning-bg: var(--afry-yellow-bright);
  --pill-warning-fg: var(--afry-coral-900);
  --pill-danger-bg:  var(--afry-coral-300);
  --pill-danger-fg:  var(--afry-coral-900);
  --pill-neutral-bg: var(--afry-grey-300);
  --pill-neutral-fg: var(--afry-grey-900);
  --pill-accent-bg:  var(--afry-yellow-bright);
  --pill-accent-fg:  var(--afry-moss-900);
}
:root[data-chart-theme="pastel"] {
  --pill-success-bg: var(--afry-moss-10);
  --pill-success-fg: var(--afry-moss-500);
  --pill-info-bg:    var(--afry-teal-10);
  --pill-info-fg:    var(--afry-teal-500);
  --pill-warning-bg: var(--afry-yellow-bright);
  --pill-warning-fg: var(--color-warning);
  --pill-danger-bg:  var(--afry-coral-100);
  --pill-danger-fg:  var(--afry-coral-400);
  --pill-neutral-bg: var(--afry-grey-100);
  --pill-neutral-fg: var(--afry-grey-500);
  --pill-accent-bg:  var(--afry-moss-50);
  --pill-accent-fg:  var(--afry-moss-500);
}
:root[data-chart-theme="mono-moss"] {
  --pill-success-bg: var(--afry-moss-100);
  --pill-success-fg: var(--afry-moss-700);
  --pill-info-bg:    var(--afry-moss-50);
  --pill-info-fg:    var(--afry-moss-600);
  --pill-warning-bg: var(--afry-moss-200);
  --pill-warning-fg: var(--afry-moss-800);
  --pill-danger-bg:  var(--afry-moss-300);
  --pill-danger-fg:  var(--afry-moss-900);
  --pill-neutral-bg: var(--afry-grey-200);
  --pill-neutral-fg: var(--afry-grey-700);
  --pill-accent-bg:  var(--afry-moss-50);
  --pill-accent-fg:  var(--afry-moss-700);
}
:root[data-chart-theme="mono-teal"] {
  --pill-success-bg: var(--afry-teal-100);
  --pill-success-fg: var(--afry-teal-700);
  --pill-info-bg:    var(--afry-teal-50);
  --pill-info-fg:    var(--afry-teal-600);
  --pill-warning-bg: var(--afry-teal-200);
  --pill-warning-fg: var(--afry-teal-800);
  --pill-danger-bg:  var(--afry-teal-300);
  --pill-danger-fg:  var(--afry-teal-900);
  --pill-neutral-bg: var(--afry-grey-200);
  --pill-neutral-fg: var(--afry-grey-700);
  --pill-accent-bg:  var(--afry-teal-50);
  --pill-accent-fg:  var(--afry-teal-700);
}
:root[data-chart-theme="mono-coral"] {
  --pill-success-bg: var(--afry-coral-100);
  --pill-success-fg: var(--afry-coral-700);
  --pill-info-bg:    var(--afry-greige);
  --pill-info-fg:    var(--afry-coral-700);
  --pill-warning-bg: var(--color-warning-bg);
  --pill-warning-fg: var(--afry-coral-900);
  --pill-danger-bg:  var(--afry-coral-300);
  --pill-danger-fg:  var(--afry-coral-900);
  --pill-neutral-bg: var(--afry-grey-200);
  --pill-neutral-fg: var(--afry-grey-700);
  --pill-accent-bg:  var(--afry-coral-100);
  --pill-accent-fg:  var(--afry-coral-700);
}
:root[data-chart-theme="safe-cb"] {
  --pill-success-bg: var(--afry-moss-100);
  --pill-success-fg: var(--afry-moss-700);
  --pill-info-bg:    var(--afry-teal-100);
  --pill-info-fg:    var(--afry-teal-700);
  --pill-warning-bg: var(--afry-yellow-bright);
  --pill-warning-fg: var(--color-warning);
  --pill-danger-bg:  var(--afry-coral-100);
  --pill-danger-fg:  var(--afry-coral-700);
  --pill-neutral-bg: var(--afry-grey-200);
  --pill-neutral-fg: var(--afry-grey-700);
  --pill-accent-bg:  var(--afry-yellow-bright);
  --pill-accent-fg:  var(--afry-moss-800);
}
:root[data-chart-theme="executive"] {
  --pill-success-bg: var(--afry-moss-50);
  --pill-success-fg: var(--afry-moss-700);
  --pill-info-bg:    var(--afry-teal-50);
  --pill-info-fg:    var(--afry-teal-700);
  --pill-warning-bg: var(--color-warning-bg);
  --pill-warning-fg: var(--color-warning);
  --pill-danger-bg:  var(--afry-coral-100);
  --pill-danger-fg:  var(--afry-coral-900);
  --pill-neutral-bg: var(--afry-grey-200);
  --pill-neutral-fg: var(--afry-grey-900);
  --pill-accent-bg:  var(--afry-greige);
  --pill-accent-fg:  var(--afry-grey-900);
}

/* =====================================================================
 * TEXT THEMES · paletas de cor de texto (independente do chart-theme)
 * ---------------------------------------------------------------------
 * Cada tema define 5 tokens: --text-primary, --text-secondary, --text-mute,
 * --text-emphasis, --text-invert · aplicáveis globalmente.
 * Tokens NÃO conflitam com --color-text* (legados) · servem como override.
 *
 * Como usar:
 *   <html data-text-theme="default">     (cinza escuro · default)
 *   <html data-text-theme="warm">        (texto em tons de coral/burgundy)
 *   <html data-text-theme="midnight">    (preto profundo · contraste max)
 *   <html data-text-theme="sepia">       (warm beige · doc impresso)
 *   <html data-text-theme="high-contrast"> (acessibilidade)
 *   <html data-text-theme="soft">        (cinza médio · long-read)
 *
 * Em JS:
 *   import { setTextTheme, listTextThemes } from './chart-palette.js';
 *   setTextTheme('midnight');
 * ===================================================================== */

:root,
:root[data-text-theme="default"] {
  /* Tokens de texto padrão seguem o --color-text estrutural do tema ativo
     (claro nos temas escuros). Quando um tema de texto é escolhido, os blocos
     [data-text-theme="X"] abaixo sobrescrevem estes valores. */
  --text-primary:   var(--color-text, var(--afry-grey-900));
  --text-secondary: var(--color-text-soft, var(--afry-grey-700));
  --text-mute:      var(--color-text-mute, var(--afry-grey-500));
  --text-emphasis:  var(--color-text, var(--afry-moss-700));
  --text-invert:    var(--color-text-invert, var(--afry-white));
  --text-link:      var(--afry-teal-700);
  --text-heading:   var(--color-text, var(--afry-moss-800));
}

:root[data-text-theme="warm"] {
  --text-primary:   var(--afry-coral-900);
  --text-secondary: var(--afry-coral-700);
  --text-mute:      var(--afry-grey-500);
  --text-emphasis:  var(--afry-coral-700);
  --text-invert:    var(--afry-white);
  --text-link:      var(--afry-coral-700);
  --text-heading:   var(--afry-coral-900);
}

:root[data-text-theme="midnight"] {
  --text-primary:   var(--afry-black);
  --text-secondary: var(--afry-grey-800);
  --text-mute:      var(--afry-grey-600);
  --text-emphasis:  var(--afry-moss-900);
  --text-invert:    var(--afry-white);
  --text-link:      var(--afry-teal-800);
  --text-heading:   var(--afry-black);
}

:root[data-text-theme="sepia"] {
  --text-primary:   var(--afry-coral-900);
  --text-secondary: var(--afry-grey-700);
  --text-mute:      var(--afry-grey-500);
  --text-emphasis:  var(--afry-coral-700);
  --text-invert:    var(--afry-greige);
  --text-link:      var(--afry-moss-600);
  --text-heading:   var(--afry-coral-900);
}

:root[data-text-theme="high-contrast"] {
  --text-primary:   var(--afry-black);
  --text-secondary: var(--afry-grey-900);
  --text-mute:      var(--afry-grey-700);
  --text-emphasis:  var(--afry-coral-900);
  --text-invert:    var(--afry-white);
  --text-link:      var(--afry-teal-900);
  --text-heading:   var(--afry-black);
}

:root[data-text-theme="soft"] {
  --text-primary:   var(--afry-grey-700);
  --text-secondary: var(--afry-grey-600);
  --text-mute:      var(--afry-grey-400);
  --text-emphasis:  var(--afry-moss-500);
  --text-invert:    var(--afry-white);
  --text-link:      var(--afry-teal-500);
  --text-heading:   var(--afry-grey-800);
}

:root[data-text-theme="afry-moss"] {
  --text-primary:   var(--afry-moss-900);
  --text-secondary: var(--afry-moss-700);
  --text-mute:      var(--afry-moss-400);
  --text-emphasis:  var(--afry-moss-500);
  --text-invert:    var(--afry-moss-50);
  --text-link:      var(--afry-moss-600);
  --text-heading:   var(--afry-moss-900);
}

:root[data-text-theme="afry-teal"] {
  --text-primary:   var(--afry-teal-900);
  --text-secondary: var(--afry-teal-700);
  --text-mute:      var(--afry-teal-400);
  --text-emphasis:  var(--afry-teal-500);
  --text-invert:    var(--afry-teal-50);
  --text-link:      var(--afry-teal-600);
  --text-heading:   var(--afry-teal-900);
}

/* Aplicação global (opt-in) · adicionar classe .use-text-theme em body
   ou em qualquer container que deva refletir o text-theme.
   Não força tudo automaticamente pra evitar quebrar elementos
   que ainda dependem de cores estruturais legadas. */
body.use-text-theme,
body.use-text-theme h1, body.use-text-theme h2, body.use-text-theme h3,
body.use-text-theme h4, body.use-text-theme h5, body.use-text-theme h6 {
  color: var(--text-primary);
}
body.use-text-theme h1, body.use-text-theme h2, body.use-text-theme h3 {
  color: var(--text-heading);
}
body.use-text-theme a { color: var(--text-link); }

/* Facets · chip/opção sem dados no recorte atual (mostra 0, não-clicável) */
.facet-zero { opacity: .38; pointer-events: none; cursor: default; }

/* ============================================================
   CAMADA DE PROTEÇÃO DE CONTRASTE
   Rótulos brancos dentro de barras/preenchimentos coloridos podem sumir em
   cores claras (amarelo, pastel, seq claro). Um halo escuro (text-shadow)
   garante legibilidade sobre QUALQUER cor de fundo, sem alterar paletas.
   Cobre: barras do hub (.eh-bar-fill) e widgets de canvas ([data-hover-bar]).
   ============================================================ */
.eh-bar-fill,
[data-hover-bar],
.bc-val-in,
.ms-pct-bar > div {
  text-shadow: 0 1px 1px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.45);
}

/* ============================================================
   TEMAS NÃO-AFRY · Preto & Branco e Tons de cinza
   (página + cards + bordas; paleta de gráficos em escala de cinza)
   ============================================================ */

/* Monocromático total nos temas P&B/cinza · dessatura emojis e qualquer cor
   residual no conteúdo da página. A topbar é poupada para o seletor de temas
   continuar mostrando as prévias coloridas. */
[data-theme="bw-white"] body > :not(afry-topbar):not(#fcdRoot),
[data-theme="bw-black"] body > :not(afry-topbar):not(#fcdRoot),
[data-theme="bw-gray"]  body > :not(afry-topbar):not(#fcdRoot),
[data-theme="dark-gray"] body > :not(afry-topbar):not(#fcdRoot) {
  filter: grayscale(1);
}
/* O painel de contadores (position:fixed) é dessaturado por dentro, sem o
   filtro no wrapper — assim não vira containing-block e não desloca o painel. */
[data-theme="bw-white"] #fcdRoot .fcd-panel,
[data-theme="bw-black"] #fcdRoot .fcd-panel,
[data-theme="bw-gray"]  #fcdRoot .fcd-panel,
[data-theme="bw-white"] #fcdRoot .fcd-modal-bg,
[data-theme="bw-black"] #fcdRoot .fcd-modal-bg,
[data-theme="bw-gray"]  #fcdRoot .fcd-modal-bg,
[data-theme="dark-gray"] #fcdRoot .fcd-panel,
[data-theme="dark-gray"] #fcdRoot .fcd-modal-bg {
  filter: grayscale(1);
}

/* Black & White W · fundo branco, elementos pretos */
[data-theme="bw-white"], .theme-bw-white {
  --topbar-bg:          #FFFFFF;
  --topbar-fg:          #000000;
  --topbar-line:        rgba(0,0,0,.22);
  --hero-bg:            #FFFFFF;
  --hero-fg:            #000000;
  --color-bg:           #FFFFFF;
  --color-bg-soft:      #F2F2F2;
  --color-bg-card:      #FFFFFF;
  --color-bg-elevated:  #F2F2F2;
  --color-bg-section:   #F7F7F7;
  --color-text:         #000000;
  --color-text-soft:    #333333;
  --color-text-mute:    #666666;
  --color-text-invert:  #FFFFFF;
  --color-border:       #000000;
  --color-border-strong:#000000;
  --color-divider:      #D9D9D9;
  --color-primary:      #000000;
  --color-primary-hover:#333333;
  --color-primary-soft: #ECECEC;
  --color-primary-text: #FFFFFF;
  --color-accent:       #000000;
}

/* Black & White B · fundo preto, elementos brancos */
[data-theme="bw-black"], .theme-bw-black {
  --topbar-bg:          #000000;
  --topbar-fg:          #FFFFFF;
  --topbar-line:        rgba(255,255,255,.24);
  --hero-bg:            #000000;
  --hero-fg:            #FFFFFF;
  --color-bg:           #000000;
  --color-bg-soft:      #0D0D0D;
  --color-bg-card:      #0D0D0D;
  --color-bg-elevated:  #1A1A1A;
  --color-bg-section:   #0D0D0D;
  --color-text:         #FFFFFF;
  --color-text-soft:    #D9D9D9;
  --color-text-mute:    #A6A6A6;
  --color-text-invert:  #000000;
  --color-border:       #FFFFFF;
  --color-border-strong:#FFFFFF;
  --color-divider:      #333333;
  --color-primary:      #FFFFFF;
  --color-primary-hover:#E0E0E0;
  --color-primary-soft: #1A1A1A;
  --color-primary-text: #000000;
  --color-accent:       #FFFFFF;
}

/* Shades of gray · escala de cinza neutra */
[data-theme="bw-gray"], .theme-bw-gray {
  --topbar-bg:          linear-gradient(180deg, #8A8A8A, #6E6E6E);
  --topbar-fg:          #111111;
  --topbar-line:        rgba(0,0,0,.28);
  --hero-bg:            linear-gradient(135deg, #6E6E6E, #8A8A8A);
  --hero-fg:            #111111;
  --color-bg:           #BDBDBD;
  --color-bg-soft:      #B0B0B0;
  --color-bg-card:      #CFCFCF;
  --color-bg-elevated:  #C2C2C2;
  --color-bg-section:   #C7C7C7;
  --color-text:         #1A1A1A;
  --color-text-soft:    #333333;
  --color-text-mute:    #555555;
  --color-text-invert:  #FFFFFF;
  --color-border:       #8A8A8A;
  --color-border-strong:#6B6B6B;
  --color-divider:      #A8A8A8;
  --color-primary:      #424242;
  --color-primary-hover:#2A2A2A;
  --color-primary-soft: #D6D6D6;
  --color-primary-text: #FFFFFF;
  --color-accent:       #616161;
}

/* Dark Gray · fundo cinza-escuro, textos brancos */
[data-theme="dark-gray"], .theme-dark-gray {
  --topbar-bg:          #2D2D2D;
  --topbar-fg:          #FFFFFF;
  --topbar-line:        rgba(255,255,255,.22);
  --hero-bg:            #2D2D2D;
  --hero-fg:            #FFFFFF;
  --color-bg:           #2D2D2D;
  --color-bg-soft:      #272727;
  --color-bg-card:      #353535;
  --color-bg-elevated:  #3F3F3F;
  --color-bg-section:   #2A2A2A;
  --color-text:         #FFFFFF;
  --color-text-soft:    #D9D9D9;
  --color-text-mute:    #A6A6A6;
  --color-text-invert:  #2D2D2D;
  --color-border:       #4D4D4D;
  --color-border-strong:#5F5F5F;
  --color-divider:      #404040;
  --color-primary:      #FFFFFF;
  --color-primary-hover:#E0E0E0;
  --color-primary-soft: #3A3A3A;
  --color-primary-text: #2D2D2D;
  --color-accent:       #FFFFFF;
}

/* Paleta de gráficos em escala de cinza · clara→escura (para fundos claros/cinza) */
:root[data-chart-theme="bw"] {
  --chart-cat-1:  #121212;
  --chart-cat-2:  #404040;
  --chart-cat-3:  #6B6B6B;
  --chart-cat-4:  #949494;
  --chart-cat-5:  #BDBDBD;
  --chart-cat-6:  #2A2A2A;
  --chart-cat-7:  #555555;
  --chart-cat-8:  #808080;
  --chart-cat-9:  #A6A6A6;
  --chart-cat-10: #D0D0D0;
  --chart-cat-11: #1A1A1A;
  --chart-cat-12: #E0E0E0;
  --chart-seq-1:  #EDEDED;
  --chart-seq-2:  #BDBDBD;
  --chart-seq-3:  #808080;
  --chart-seq-4:  #404040;
  --chart-seq-5:  #000000;
  --chart-div-neg: #BDBDBD;
  --chart-div-mid: #808080;
  --chart-div-pos: #1A1A1A;
  --chart-success: #2A2A2A;
  --chart-warning: #6B6B6B;
  --chart-danger:  #000000;
  --chart-info:    #404040;
  --chart-neutral: #949494;
  --chart-accent:  #1A1A1A;
}

/* Paleta de gráficos em escala de cinza invertida · para fundo preto */
:root[data-chart-theme="bw-dark"] {
  --chart-cat-1:  #FFFFFF;
  --chart-cat-2:  #D9D9D9;
  --chart-cat-3:  #B3B3B3;
  --chart-cat-4:  #8C8C8C;
  --chart-cat-5:  #666666;
  --chart-cat-6:  #E6E6E6;
  --chart-cat-7:  #BFBFBF;
  --chart-cat-8:  #999999;
  --chart-cat-9:  #737373;
  --chart-cat-10: #4D4D4D;
  --chart-cat-11: #F2F2F2;
  --chart-cat-12: #595959;
  --chart-seq-1:  #333333;
  --chart-seq-2:  #666666;
  --chart-seq-3:  #999999;
  --chart-seq-4:  #CCCCCC;
  --chart-seq-5:  #FFFFFF;
  --chart-div-neg: #666666;
  --chart-div-mid: #999999;
  --chart-div-pos: #FFFFFF;
  --chart-success: #E6E6E6;
  --chart-warning: #999999;
  --chart-danger:  #FFFFFF;
  --chart-info:    #CCCCCC;
  --chart-neutral: #808080;
  --chart-accent:  #FFFFFF;
}