/**
 * Design Tokens — Minhas Melhorias
 * Fonte única de verdade. Ver IDENTIDADE_VISUAL.md
 */

:root {
  /* Marca */
  --brand-50:  #f5f3ff;
  --brand-100: #ede9fe;
  --brand-200: #ddd6fe;
  --brand-300: #c4b5fd;
  --brand-400: #a78bfa;
  --brand-500: #7c3aed;
  --brand-600: #6d28d9;
  --brand-700: #5b21b6;
  --brand-900: #2e1065;
  --accent-warm: #f97316;

  /* Semântica financeira */
  --color-income:     #16a34a;
  --color-income-bg:  #f0fdf4;
  --color-expense:    #dc2626;
  --color-expense-bg: #fef2f2;
  --color-balance:    #2563eb;
  --color-balance-bg: #eff6ff;
  --color-warning:    #d97706;
  --color-warning-bg: #fffbeb;

  /* Gradientes semânticos (compat. extrato-moderno) */
  --success-gradient: var(--color-income);
  --danger-gradient:  var(--color-expense);
  --info-gradient:    var(--color-balance);
  --warning-gradient: var(--color-warning);

  /* Superfícies */
  --surface-page:   #f8fafc;
  --surface-card:   #ffffff;
  --surface-raised: #ffffff;
  --border-default: #e2e8f0;
  --border-strong:  #cbd5e1;
  --text-primary:   #0f172a;
  --text-secondary: #64748b;
  --text-muted:     #94a3b8;
  --text-inverse:   #ffffff;

  /* Sidebar */
  --sidebar-bg:          #1e1b4b;
  --sidebar-bg-hover:    rgba(255, 255, 255, 0.08);
  --sidebar-bg-active:   rgba(255, 255, 255, 0.12);
  --sidebar-text:        rgba(255, 255, 255, 0.85);
  --sidebar-text-active: #ffffff;
  --sidebar-border:      rgba(255, 255, 255, 0.08);

  /* Tipografia */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Espaçamento */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;

  /* Bordas e sombras */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-full: 9999px;
  --shadow-sm:   0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md:   0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg:   0 8px 24px rgba(15, 23, 42, 0.10);

  /* Motion */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   500ms ease;

  /* Interação (hover / focus) — app autenticado */
  --hover-surface:         rgba(15, 23, 42, 0.04);
  --hover-surface-strong:  rgba(15, 23, 42, 0.07);
  --hover-border:          var(--brand-500);
  --hover-text:            var(--brand-600);
  --radius-interactive:    12px;

  /* Aliases legados (migração gradual) */
  --primary-color:       var(--brand-500);
  --primary-color-light: var(--brand-400);
  --primary-color-rgb:   124, 58, 237;
  --primary-gradient:    var(--brand-500);
  --background-color:    var(--surface-page);
  --text-color:          var(--text-primary);
  --container-bg-color:  var(--surface-card);
  --header-bg-color:     #f1f5f9;
  --card-bg-color:       var(--surface-card);
  --card-border-color:   var(--border-default);
  --button-bg-color:     var(--brand-500);
  --button-hover-bg-color: var(--brand-600);
  --link-color:          var(--brand-500);
  --link-hover-color:    var(--brand-600);
  --success-color:       var(--color-income);
  --danger-color:        var(--color-expense);
  --info-color:          var(--color-balance);
  --warning-color:       var(--color-warning);
  --white:               #ffffff;

  /* Bootstrap alinhado à marca (app logado) */
  --bs-primary:            #7c3aed;
  --bs-primary-rgb:        124, 58, 237;
  --bs-link-color:         #7c3aed;
  --bs-link-hover-color:   #6d28d9;
  --bs-body-font-family:   var(--font-sans);
  --bs-body-bg:            var(--surface-page);
  --bs-body-color:         var(--text-primary);
  --bs-tooltip-color:      #f8fafc;
  --bs-tooltip-bg:         #1e293b;
  --bs-tooltip-opacity:    1;
  --bs-popover-bg:         var(--surface-card);
  --bs-popover-body-color: var(--text-primary);
  --bs-popover-header-bg:  var(--surface-raised);
  --bs-popover-header-color: var(--text-primary);
  --bs-popover-border-color: var(--border-default);

  /* Escala de cinza (compatibilidade módulos legados) */
  --gray-50:  #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
}

html,
body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[data-theme="dark"],
body.dark-theme {
  --surface-page:   #0f172a;
  --surface-card:   #1e293b;
  --surface-raised: #334155;
  --border-default: #334155;
  --border-strong:  #475569;
  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;
  --sidebar-bg:     #0f172a;
  --background-color:    var(--surface-page);
  --text-color:          var(--text-primary);
  --container-bg-color:  var(--surface-card);
  --header-bg-color:     #1e293b;
  --card-bg-color:       var(--surface-card);
  --card-border-color:   var(--border-default);
  --link-color:          #a78bfa;
  --link-hover-color:    #c4b5fd;
  --bs-body-bg:          var(--surface-page);
  --bs-body-color:       var(--text-primary);
  --bs-tooltip-color:    #0f172a;
  --bs-tooltip-bg:       #f1f5f9;
  --bs-tooltip-opacity:  1;
  --bs-popover-bg:       var(--surface-raised);
  --bs-popover-body-color: var(--text-primary);
  --bs-popover-header-bg:  var(--surface-card);
  --bs-popover-header-color: var(--text-primary);
  --bs-popover-border-color: var(--border-strong);

  /* Escala escura legada (compatibilidade módulos) */
  --dark-1: #0f172a;
  --dark-2: #1e293b;
  --dark-3: #334155;
  --dark-4: #475569;

  --hover-surface:        rgba(255, 255, 255, 0.06);
  --hover-surface-strong: rgba(255, 255, 255, 0.10);
  --hover-border:         var(--brand-400);
  --hover-text:           var(--text-primary);
}

.app-logo {
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}

.metric-value,
.valor-monetario,
.currency-value,
.dashboard-metrics-grid .metric-value,
.extract-amount,
.saldo-valor {
  font-variant-numeric: tabular-nums;
}