:root {
  /* ==========================================================================
     1. CONFIGURAÇÃO RÁPIDA POR SITE (Edite apenas esta seção por site)
     ========================================================================== */
  
  /* Cor Primária / Marca do Site */
  --site-primary:       #2563eb; /* Azul Royal (Economia/Finanças) */
  --site-primary-hover: #1d4ed8;
  --site-primary-light: #eff6ff;

  /* Modo do Tema Padrão: 
     Alterne aqui se um site específico for nativamente Claro ou Escuro */
  --site-theme-mode: light;

  /* ==========================================================================
     2. ESCALA NEUTRA DE ALTO CONTRASTE (Slate Base)
     ========================================================================== */
  --ui-white:    #ffffff;
  --ui-gray-50:  #f8fafc;
  --ui-gray-100: #f1f5f9;
  --ui-gray-200: #e2e8f0;
  --ui-gray-300: #cbd5e1;
  --ui-gray-400: #94a3b8;
  --ui-gray-500: #64748b;
  --ui-gray-600: #475569;
  --ui-gray-700: #334155;
  --ui-gray-800: #1e293b;
  --ui-gray-900: #0f172a;
  --ui-gray-950: #020617;

  /* Status Universais */
  --ui-success:       #16a34a;
  --ui-success-hover: #15803d;
  --ui-danger:        #dc2626;
  --ui-danger-hover:  #b91c1c;
  --ui-warning:       #d97706;

  /* ==========================================================================
     3. TOKENS SEMÂNTICOS: MODO CLARO (Default)
     Hierarquia com degraus claros de contraste para Hover e Superfícies
     ========================================================================== */
  --ui-bg-body:          var(--ui-white);
  --ui-bg-surface:       var(--ui-gray-50);
  --ui-bg-surface-hover: var(--ui-gray-100);
  --ui-bg-card:          var(--ui-white);
  --ui-bg-card-hover:    var(--ui-gray-50);
  --ui-bg-overlay:       rgba(15, 23, 42, 0.65);

  --ui-text-primary:     var(--ui-gray-950);
  --ui-text-secondary:   var(--ui-gray-600);
  --ui-text-muted:       var(--ui-gray-400);
  --ui-text-inverse:     var(--ui-white);

  --ui-border-color:     var(--ui-gray-200);
  --ui-border-hover:     var(--ui-gray-400);
  --ui-border-focus:     var(--site-primary);

  --ui-primary:          var(--site-primary);
  --ui-primary-hover:    var(--site-primary-hover);
  --ui-primary-subtle:   var(--site-primary-light);

  /* ==========================================================================
     4. TIPOGRAFIA, ESPAÇAMENTOS E BORDAS
     ========================================================================== */
  --ui-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --ui-font-size-xs:   0.75rem;   /* 12px */
  --ui-font-size-sm:   0.875rem;  /* 14px */
  --ui-font-size-base: 1rem;      /* 16px */
  --ui-font-size-lg:   1.125rem;  /* 18px */

  --ui-font-weight-normal:   400;
  --ui-font-weight-medium:   500;
  --ui-font-weight-semibold: 600;
  --ui-font-weight-bold:     700;

  --ui-space-1: 0.25rem;
  --ui-space-2: 0.5rem;
  --ui-space-3: 0.75rem;
  --ui-space-4: 1rem;
  --ui-space-6: 1.5rem;
  --ui-space-8: 2rem;

  --ui-radius-sm:   4px;
  --ui-radius-md:   6px;
  --ui-radius-lg:   8px;
  --ui-radius-xl:   12px;
  --ui-radius-full: 9999px;

  --ui-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --ui-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --ui-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --ui-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.15);

  --ui-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ui-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  --ui-z-dropdown: 1000;
  --ui-z-popover:  1040;
  --ui-z-tooltip:  1050;
  --ui-z-modal:    1060;
  --ui-z-toast:    1070;
}

/* ==========================================================================
   5. MODO ESCURO COM ALTO CONTRASTE
   Aqui resolvemos o fundo que sumia: o card usa 900, o hover vai para 800 e a borda vai para 700!
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --ui-bg-body:          var(--ui-gray-950); /* Fundo da página (mais escuro) */
    --ui-bg-surface:       var(--ui-gray-900); /* Barras, painéis internos */
    --ui-bg-surface-hover: var(--ui-gray-800); /* Hover com contraste nítido */
    
    --ui-bg-card:          var(--ui-gray-900); /* Fundo do card */
    --ui-bg-card-hover:    #1e293b;            /* Elevação ao passar o mouse */
    --ui-bg-overlay:       rgba(2, 6, 23, 0.85);

    --ui-text-primary:     var(--ui-gray-50);  /* Texto principal quase branco */
    --ui-text-secondary:   var(--ui-gray-300); /* Subtextos com leitura fácil */
    --ui-text-muted:       var(--ui-gray-500);

    --ui-border-color:     var(--ui-gray-800);
    --ui-border-hover:     var(--ui-gray-600); /* Borda destaca no hover */

    --ui-primary-subtle:   rgba(37, 99, 235, 0.2);
  }
}

/* Forçamento manual via classe .dark ou .light no body */
body.dark {
  --ui-bg-body:          var(--ui-gray-950);
  --ui-bg-surface:       var(--ui-gray-900);
  --ui-bg-surface-hover: var(--ui-gray-800);
  --ui-bg-card:          var(--ui-gray-900);
  --ui-bg-card-hover:    #1e293b;
  --ui-text-primary:     var(--ui-gray-50);
  --ui-text-secondary:   var(--ui-gray-300);
  --ui-border-color:     var(--ui-gray-800);
  --ui-border-hover:     var(--ui-gray-600);
}

/* ==========================================================================
   RESET DEFENSIVO ANTI-TEMA PAI
   Garante isolamento visual completo para todos os componentes .ui-*
   ========================================================================== */

/* 1. Remove margens e heranças estranhas de parágrafos/quebras dentro da UI */
.ui-tabs p, .ui-accordion p, .ui-modal p, .ui-card p, .ui-popover-panel p {
  margin: 0 0 var(--ui-space-3) 0 !important;
}
.ui-tab-nav p, .ui-tab-nav br, .ui-accordion-header br {
  display: none !important;
}

/* 2. Reseta botões para não herdarem sombras, bordas e fundos feios do tema pai */
.ui-btn,
.ui-tab-button,
.ui-copy-btn,
.ui-modal-close,
.ui-dropdown-toggle,
.ui-dropdown-item {
  box-sizing: border-box !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: normal !important;
  text-shadow: none !important;
}

/* 3. Garante que flexbox e grids não quebrem por herança */
.ui-tabs,
.ui-tab-nav,
.ui-accordion,
.ui-card,
.ui-modal-container {
  box-sizing: border-box !important;
}