/* ============================================================
   FINANCEL DESIGN TOKENS v4.0 PREMIUM
   ============================================================
   
   🎯 FONTE ÚNICA DA VERDADE VISUAL
   
   Este arquivo define TODOS os tokens do design system.
   Nenhum outro arquivo deve redefinir essas variáveis.
   
   Inspirado em: vendas-premium-rebuild.css
   Compatível com: todo o app FINANCEL
   
   ============================================================ */

:root {
  /* ==========================================
     🎨 CORES — BACKGROUNDS (Dark Mode)
     ========================================== */
  
  --fin-bg-deep:      #020617;                      /* Fundo principal do app */
  --fin-bg-surface:   #0a0f1f;                      /* Superfícies elevadas */
  --fin-bg-card:      rgba(17, 25, 45, 0.85);       /* Cards e painéis */
  --fin-bg-elevated:  rgba(15, 23, 42, 0.95);       /* Elementos destacados */
  --fin-bg-glass:     rgba(4, 18, 39, 0.72);        /* Efeito glassmorphism */
  --fin-bg-overlay:   rgba(2, 6, 23, 0.85);         /* Overlay de modais */
  
  /* ==========================================
     🏆 GOLD — Cor Principal da Marca
     ========================================== */
  
  --fin-gold-50:      #fefce8;
  --fin-gold-100:     #fef3c7;
  --fin-gold-200:     #fde68a;
  --fin-gold-300:     #fcd34d;
  --fin-gold-400:     #facc15;                      /* ⭐ Principal */
  --fin-gold-500:     #eab308;
  --fin-gold-600:     #ca8a04;
  
  /* RGB para uso com alpha */
  --fin-gold-400-rgb: 250 204 21;
  --fin-gold-500-rgb: 234 179 8;
  
  /* ==========================================
     💎 CYAN — Cor de Acento
     ========================================== */
  
  --fin-cyan-200:     #a5f3fc;
  --fin-cyan-300:     #7dd3fc;
  --fin-cyan-400:     #38bdf8;                      /* ⭐ Principal */
  --fin-cyan-500:     #0ea5e9;
  
  /* RGB para uso com alpha */
  --fin-cyan-300-rgb: 125 211 252;
  --fin-cyan-400-rgb: 56 189 248;
  
  /* ==========================================
     🔘 SLATE — Cores Neutras
     ========================================== */
  
  --fin-slate-50:     #f8fafc;
  --fin-slate-100:    #f1f5f9;
  --fin-slate-200:    #e2e8f0;
  --fin-slate-300:    #cbd5e1;
  --fin-slate-400:    #94a3b8;                      /* ⭐ Texto muted */
  --fin-slate-500:    #64748b;
  --fin-slate-600:    #475569;
  --fin-slate-700:    #334155;
  --fin-slate-800:    #1e293b;
  --fin-slate-900:    #0f172a;
  --fin-slate-950:    #020617;
  
  /* RGB para uso com alpha */
  --fin-slate-50-rgb:  248 250 252;
  --fin-slate-400-rgb: 148 163 184;
  --fin-slate-900-rgb: 15 23 42;
  
  /* ==========================================
     🌿 GREEN — Sucesso/Positivo
     ========================================== */
  
  --fin-green-400:    #4ade80;
  --fin-green-500:    #22c55e;                      /* ⭐ Principal */
  --fin-green-600:    #16a34a;
  
  /* RGB para uso com alpha */
  --fin-green-500-rgb: 34 197 94;
  
  /* ==========================================
     🔴 RED — Erro/Perigo
     ========================================== */
  
  --fin-red-400:      #f87171;
  --fin-red-500:      #ef4444;                      /* ⭐ Principal */
  --fin-red-600:      #dc2626;
  
  /* RGB para uso com alpha */
  --fin-red-500-rgb: 239 68 68;
  
  /* ==========================================
     🟠 ORANGE — Alerta/Atenção
     ========================================== */
  
  --fin-orange-400:   #fb923c;
  --fin-orange-500:   #f97316;                      /* ⭐ Principal */
  
  /* ==========================================
     🎯 CORES SEMÂNTICAS
     ========================================== */
  
  --fin-success:      var(--fin-green-500);
  --fin-success-soft: rgba(34, 197, 94, 0.15);
  --fin-success-text: #bbf7d0;
  
  --fin-danger:       var(--fin-red-500);
  --fin-danger-soft:  rgba(239, 68, 68, 0.15);
  --fin-danger-text:  #fecaca;
  
  --fin-warning:      var(--fin-orange-500);
  --fin-warning-soft: rgba(245, 158, 11, 0.15);
  --fin-warning-text: #fed7aa;
  
  --fin-info:         var(--fin-cyan-400);
  --fin-info-soft:    rgba(56, 189, 248, 0.15);
  --fin-info-text:    #bae6fd;
  
  /* ==========================================
     📝 TEXTO
     ========================================== */
  
  --fin-text-primary:   #f9fafb;                   /* Títulos, destaque */
  --fin-text-secondary: #e5e7eb;                   /* Corpo de texto */
  --fin-text-muted:     #94a3b8;                   /* Labels, hints */
  --fin-text-disabled:  #64748b;                   /* Desabilitado */
  --fin-text-inverse:   #111827;                   /* Texto em fundo claro */
  
  /* ==========================================
     🔲 BORDAS
     ========================================== */
  
  --fin-border-subtle:  rgba(148, 163, 184, 0.15);
  --fin-border-default: rgba(148, 163, 184, 0.25);
  --fin-border-strong:  rgba(148, 163, 184, 0.40);
  --fin-border-gold:    rgba(250, 204, 21, 0.50);
  --fin-border-focus:   rgba(56, 189, 248, 0.60);
  
  /* ==========================================
     🔤 TIPOGRAFIA
     ========================================== */
  
  --fin-font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Tamanhos */
  --fin-text-xs:    0.75rem;     /* 12px */
  --fin-text-sm:    0.875rem;    /* 14px */
  --fin-text-base:  1rem;        /* 16px */
  --fin-text-lg:    1.125rem;    /* 18px */
  --fin-text-xl:    1.25rem;     /* 20px */
  --fin-text-2xl:   1.5rem;      /* 24px */
  --fin-text-3xl:   1.875rem;    /* 30px */
  --fin-text-4xl:   2.25rem;     /* 36px */
  --fin-text-5xl:   3rem;        /* 48px */
  
  /* Pesos */
  --fin-font-normal:    400;
  --fin-font-medium:    500;
  --fin-font-semibold:  600;
  --fin-font-bold:      700;
  --fin-font-extrabold: 800;
  
  /* Line Heights */
  --fin-leading-none:    1;
  --fin-leading-tight:   1.25;
  --fin-leading-snug:    1.375;
  --fin-leading-normal:  1.5;
  --fin-leading-relaxed: 1.625;
  
  /* Letter Spacing */
  --fin-tracking-tight:  -0.025em;
  --fin-tracking-normal: 0;
  --fin-tracking-wide:   0.025em;
  --fin-tracking-wider:  0.05em;
  --fin-tracking-widest: 0.1em;
  
  /* ==========================================
     📐 ESPAÇAMENTOS
     ========================================== */
  
  --fin-space-0:   0;
  --fin-space-px:  1px;
  --fin-space-0-5: 0.125rem;   /* 2px */
  --fin-space-1:   0.25rem;    /* 4px */
  --fin-space-1-5: 0.375rem;   /* 6px */
  --fin-space-2:   0.5rem;     /* 8px */
  --fin-space-2-5: 0.625rem;   /* 10px */
  --fin-space-3:   0.75rem;    /* 12px */
  --fin-space-3-5: 0.875rem;   /* 14px */
  --fin-space-4:   1rem;       /* 16px */
  --fin-space-5:   1.25rem;    /* 20px */
  --fin-space-6:   1.5rem;     /* 24px */
  --fin-space-7:   1.75rem;    /* 28px */
  --fin-space-8:   2rem;       /* 32px */
  --fin-space-9:   2.25rem;    /* 36px */
  --fin-space-10:  2.5rem;     /* 40px */
  --fin-space-12:  3rem;       /* 48px */
  --fin-space-14:  3.5rem;     /* 56px */
  --fin-space-16:  4rem;       /* 64px */
  --fin-space-20:  5rem;       /* 80px */
  
  /* ==========================================
     🔘 BORDER RADIUS
     ========================================== */
  
  --fin-radius-none: 0;
  --fin-radius-sm:   0.375rem;   /* 6px */
  --fin-radius-md:   0.5rem;     /* 8px */
  --fin-radius-lg:   0.75rem;    /* 12px */
  --fin-radius-xl:   1rem;       /* 16px */
  --fin-radius-2xl:  1.25rem;    /* 20px */
  --fin-radius-3xl:  1.5rem;     /* 24px */
  --fin-radius-full: 9999px;     /* Pill */
  
  /* ==========================================
     🌫️ SOMBRAS
     ========================================== */
  
  --fin-shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.20);
  --fin-shadow-sm:   0 2px 4px rgba(0, 0, 0, 0.25);
  --fin-shadow-md:   0 4px 8px rgba(0, 0, 0, 0.30);
  --fin-shadow-lg:   0 8px 16px rgba(0, 0, 0, 0.35);
  --fin-shadow-xl:   0 16px 32px rgba(0, 0, 0, 0.40);
  --fin-shadow-2xl:  0 24px 48px rgba(0, 0, 0, 0.50);
  --fin-shadow-3xl:  0 32px 64px rgba(0, 0, 0, 0.60);
  
  /* Sombras especiais */
  --fin-shadow-card:    0 20px 50px rgba(0, 0, 0, 0.50);
  --fin-shadow-header:  0 18px 50px rgba(0, 0, 0, 0.70);
  --fin-shadow-modal:   0 25px 70px rgba(0, 0, 0, 0.80);
  --fin-shadow-glow:    0 0 32px rgba(250, 204, 21, 0.35);
  --fin-shadow-glow-sm: 0 0 16px rgba(250, 204, 21, 0.25);
  --fin-shadow-cyan:    0 0 24px rgba(56, 189, 248, 0.30);
  
  /* ==========================================
     ⏱️ TRANSIÇÕES
     ========================================== */
  
  --fin-duration-75:   75ms;
  --fin-duration-100:  100ms;
  --fin-duration-150:  150ms;
  --fin-duration-200:  200ms;
  --fin-duration-300:  300ms;
  --fin-duration-500:  500ms;
  --fin-duration-700:  700ms;
  --fin-duration-1000: 1000ms;
  
  --fin-ease-linear:    linear;
  --fin-ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --fin-ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --fin-ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --fin-ease-bounce:    cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Transições compostas */
  --fin-transition-fast:   var(--fin-duration-150) var(--fin-ease-out);
  --fin-transition-normal: var(--fin-duration-200) var(--fin-ease-out);
  --fin-transition-slow:   var(--fin-duration-300) var(--fin-ease-out);
  
  /* ==========================================
     📚 Z-INDEX SCALE
     ========================================== */
  
  --fin-z-below:    -1;
  --fin-z-base:     0;
  --fin-z-raised:   1;
  --fin-z-dropdown: 10;
  --fin-z-sticky:   20;
  --fin-z-fixed:    30;
  --fin-z-backdrop: 40;
  --fin-z-modal:    50;
  --fin-z-popover:  60;
  --fin-z-tooltip:  70;
  --fin-z-max:      9999;
  
  /* ==========================================
     🎨 GRADIENTES PREMIUM
     ========================================== */
  
  /* Background principal do app */
  --fin-grad-bg: 
    radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.12), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(250, 204, 21, 0.12), transparent 50%),
    linear-gradient(145deg, var(--fin-bg-deep) 0%, var(--fin-bg-surface) 100%);
  
  /* Background de cards */
  --fin-grad-card:
    radial-gradient(circle at 0% 0%, rgba(248, 250, 252, 0.04), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(56, 189, 248, 0.08), transparent 50%),
    linear-gradient(145deg, var(--fin-bg-elevated), var(--fin-bg-card));
  
  /* Background do header */
  --fin-grad-header:
    radial-gradient(circle at 0% 0%, rgba(248, 250, 252, 0.05), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(250, 204, 21, 0.10), transparent 50%),
    linear-gradient(135deg, var(--fin-bg-elevated), var(--fin-bg-card));
  
  /* Botão CTA Gold */
  --fin-grad-gold-cta: linear-gradient(135deg, #fbbf24, #facc15, #f97316);
  
  /* Aurora animada */
  --fin-grad-aurora:
    radial-gradient(circle at 20% 0%, rgba(56, 189, 248, 0.14), transparent 50%),
    radial-gradient(circle at 80% 100%, rgba(250, 204, 21, 0.12), transparent 50%);
  
  /* Grid de fundo */
  --fin-grad-grid:
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(56, 189, 248, 0.03) 26px 27px),
    repeating-linear-gradient(90deg, transparent 0 26px, rgba(250, 204, 21, 0.02) 26px 27px);
  
  /* ==========================================
     📱 BREAKPOINTS (para referência em JS)
     ========================================== */
  
  --fin-screen-sm:  640px;
  --fin-screen-md:  768px;
  --fin-screen-lg:  1024px;
  --fin-screen-xl:  1280px;
  --fin-screen-2xl: 1536px;
  
  /* ==========================================
     📦 CONTAINERS
     ========================================== */
  
  --fin-container-sm:  640px;
  --fin-container-md:  768px;
  --fin-container-lg:  1024px;
  --fin-container-xl:  1180px;
  --fin-container-2xl: 1400px;
  
  /* ==========================================
     🔲 COMPONENTES — TAMANHOS BASE
     ========================================== */
  
  /* Botões */
  --fin-btn-height-sm: 32px;
  --fin-btn-height-md: 40px;
  --fin-btn-height-lg: 48px;
  
  /* Inputs */
  --fin-input-height-sm: 36px;
  --fin-input-height-md: 44px;
  --fin-input-height-lg: 52px;
  
  /* Cards */
  --fin-card-padding-sm: var(--fin-space-3);
  --fin-card-padding-md: var(--fin-space-4);
  --fin-card-padding-lg: var(--fin-space-6);
  
  /* ==========================================
     🔄 ALIASES DE COMPATIBILIDADE
     Mantém compatibilidade com CSS existente
     ========================================== */
  
  /* Cores antigas → novas */
  --bg:       var(--fin-bg-deep);
  --bg-soft:  var(--fin-bg-surface);
  --navy:     var(--fin-slate-900);
  --gold:     var(--fin-gold-400);
  --gold-soft: rgba(250, 204, 21, 0.24);
  --accent:   var(--fin-cyan-400);
  --muted:    var(--fin-slate-400);
  --text:     var(--fin-text-secondary);
  --danger:   var(--fin-danger);
  --success:  var(--fin-success);
  
  /* Tokens antigos do design-system-v3 */
  --blue-950: var(--fin-slate-950);
  --blue-900: #02091f;
  --blue-850: #031024;
  --blue-800: #041227;
  --blue-700: #0b162c;
  
  --green-400: var(--fin-green-400);
  --green-500: var(--fin-green-500);
  --teal-400:  #2dd4bf;
  
  --gold-200: var(--fin-gold-100);
  --gold-300: var(--fin-gold-200);
  --gold-400: var(--fin-gold-400);
  --gold-500: var(--fin-gold-500);
  
  --cyan-300: var(--fin-cyan-300);
  --cyan-400: var(--fin-cyan-400);
  
  --slate-50:  var(--fin-slate-50);
  --slate-100: var(--fin-slate-100);
  --slate-200: var(--fin-slate-200);
  --slate-300: var(--fin-slate-300);
  --slate-400: var(--fin-slate-400);
  --slate-500: var(--fin-slate-500);
  --slate-600: var(--fin-slate-600);
  --slate-700: var(--fin-slate-700);
  --slate-800: var(--fin-slate-800);
  --slate-900: var(--fin-slate-900);
  
  --text-main:   var(--fin-text-secondary);
  --text-soft:   var(--fin-text-muted);
  --text-muted:  var(--fin-text-disabled);
  --text-strong: var(--fin-text-primary);
  
  --glass-deep:   var(--fin-bg-elevated);
  --glass-soft:   var(--fin-bg-card);
  --glass-thin:   var(--fin-bg-glass);
  --border-soft:  var(--fin-border-default);
  --border-strong: var(--fin-border-strong);
  
  --grad-app-bg:    var(--fin-grad-bg);
  --grad-header:    var(--fin-grad-header);
  --grad-card:      var(--fin-grad-card);
  --grad-gold-cta:  var(--fin-grad-gold-cta);
  
  --radius-xs:   var(--fin-radius-sm);
  --radius-sm:   var(--fin-radius-md);
  --radius-md:   var(--fin-radius-lg);
  --radius-lg:   var(--fin-radius-2xl);
  --radius-xl:   var(--fin-radius-3xl);
  --radius-full: var(--fin-radius-full);
  
  --space-1: var(--fin-space-1);
  --space-2: var(--fin-space-2);
  --space-3: var(--fin-space-3);
  --space-4: var(--fin-space-4);
  --space-5: var(--fin-space-5);
  --space-6: var(--fin-space-6);
  --space-8: var(--fin-space-8);
  
  --shadow-soft:   var(--fin-shadow-lg);
  --shadow-strong: var(--fin-shadow-2xl);
  --shadow-gold:   var(--fin-shadow-glow);
  
  --transition-fast:   var(--fin-transition-fast);
  --transition-normal: var(--fin-transition-normal);
  --transition-slow:   var(--fin-transition-slow);
  
  --z-bg:     var(--fin-z-below);
  --z-aurora: var(--fin-z-base);
  --z-page:   var(--fin-z-raised);
  --z-header: var(--fin-z-sticky);
  --z-nav:    var(--fin-z-fixed);
  --z-modal:  var(--fin-z-modal);
  --z-toast:  var(--fin-z-popover);
  
  /* RGB aliases para compatibilidade */
  --blue-950-rgb:   2 6 23;
  --slate-400-rgb:  var(--fin-slate-400-rgb);
  --gold-400-rgb:   var(--fin-gold-400-rgb);
  --gold-500-rgb:   var(--fin-gold-500-rgb);
  --cyan-400-rgb:   var(--fin-cyan-400-rgb);
  --danger-500-rgb: var(--fin-red-500-rgb);
  --danger-200-rgb: 254 202 202;
}

/* ============================================================
   🌙 DARK MODE (padrão) — já definido acima
   ============================================================ */

/* ============================================================
   ☀️ LIGHT MODE (futuro)
   ============================================================ */

@media (prefers-color-scheme: light) {
  :root.fin-light-mode {
    /* Placeholder para implementação futura */
    --fin-placeholder: 1;
  }
}

/* ============================================================
   📱 BREAKPOINTS PADRÃO (referência para media queries)
   ============================================================
   
   Mobile First Approach:
   - xs: 0px     (mobile small - até 479px)
   - sm: 480px   (mobile large)
   - md: 640px   (tablet portrait)
   - lg: 768px   (tablet landscape)
   - xl: 1024px  (desktop small)
   - 2xl: 1280px (desktop large)
   - 3xl: 1536px (desktop wide)
   
   Uso recomendado:
   @media (min-width: 480px)  { ... }  // sm+
   @media (min-width: 640px)  { ... }  // md+
   @media (min-width: 768px)  { ... }  // lg+
   @media (min-width: 1024px) { ... }  // xl+
   @media (min-width: 1280px) { ... }  // 2xl+
   
   Mobile-first (max-width) para casos específicos:
   @media (max-width: 479px)  { ... }  // xs only
   @media (max-width: 639px)  { ... }  // below md
   @media (max-width: 767px)  { ... }  // below lg
   @media (max-width: 1023px) { ... }  // below xl
   ============================================================ */

/* ============================================================
   ♿ REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --fin-duration-75:   0ms;
    --fin-duration-100:  0ms;
    --fin-duration-150:  0ms;
    --fin-duration-200:  0ms;
    --fin-duration-300:  0ms;
    --fin-duration-500:  0ms;
    --fin-duration-700:  0ms;
    --fin-duration-1000: 0ms;
  }
}

/* ============================================================
   🖨️ PRINT
   ============================================================ */

@media print {
  :root {
    --fin-bg-deep:      #ffffff;
    --fin-bg-surface:   #ffffff;
    --fin-bg-card:      #ffffff;
    --fin-text-primary: #000000;
    --fin-text-secondary: #333333;
    --fin-shadow-card:  none;
  }
}
/* ============================================================
   ☀️ TEMA CLARO (LIGHT MODE)
   ============================================================
   
   Ativado via atributo data-theme="light" no <html>
   
   Uso: document.documentElement.setAttribute('data-theme', 'light')
   
   ============================================================ */

[data-theme="light"] {
  /* ==========================================
     🎨 CORES — BACKGROUNDS (Light Mode)
     ========================================== */
  
  --fin-bg-deep:      #f8fafc;                      /* Fundo principal */
  --fin-bg-surface:   #ffffff;                      /* Superfícies */
  --fin-bg-card:      #ffffff;                      /* Cards */
  --fin-bg-elevated:  #f1f5f9;                      /* Elementos destacados */
  --fin-bg-glass:     rgba(255, 255, 255, 0.85);    /* Glassmorphism */
  --fin-bg-overlay:   rgba(0, 0, 0, 0.50);          /* Overlay de modais */
  
  /* ==========================================
     🏆 GOLD — Ajustes para Legibilidade
     ========================================== */
  
  --fin-gold-400:     #ca8a04;                      /* Mais escuro para contraste */
  --fin-gold-500:     #a16207;
  --fin-gold-600:     #854d0e;
  
  /* RGB para uso com alpha */
  --fin-gold-400-rgb: 202 138 4;
  --fin-gold-500-rgb: 161 98 7;
  
  /* ==========================================
     💎 CYAN — Ajustes para Legibilidade
     ========================================== */
  
  --fin-cyan-400:     #0891b2;                      /* Mais escuro para contraste */
  --fin-cyan-500:     #0e7490;
  
  /* RGB para uso com alpha */
  --fin-cyan-400-rgb: 8 145 178;
  
  /* ==========================================
     🔘 SLATE — Cores Invertidas
     ========================================== */
  
  --fin-slate-50:     #020617;
  --fin-slate-100:    #0f172a;
  --fin-slate-200:    #1e293b;
  --fin-slate-300:    #334155;
  --fin-slate-400:    #475569;                      /* Texto muted */
  --fin-slate-500:    #64748b;
  --fin-slate-600:    #94a3b8;
  --fin-slate-700:    #e2e8f0;
  --fin-slate-800:    #f1f5f9;
  --fin-slate-900:    #f8fafc;
  --fin-slate-950:    #ffffff;
  
  /* RGB para uso com alpha (invertidos) */
  --fin-slate-50-rgb:  2 6 23;
  --fin-slate-400-rgb: 71 85 105;
  --fin-slate-900-rgb: 248 250 252;
  
  /* ==========================================
     🌿 GREEN — Ajustes para Legibilidade
     ========================================== */
  
  --fin-green-400:    #16a34a;
  --fin-green-500:    #15803d;                      /* Mais escuro */
  --fin-green-600:    #166534;
  
  /* RGB para uso com alpha */
  --fin-green-500-rgb: 21 128 61;
  
  /* ==========================================
     🔴 RED — Ajustes para Legibilidade
     ========================================== */
  
  --fin-red-400:      #dc2626;
  --fin-red-500:      #b91c1c;                      /* Mais escuro */
  --fin-red-600:      #991b1b;
  
  /* RGB para uso com alpha */
  --fin-red-500-rgb: 185 28 28;
  
  /* ==========================================
     🟠 ORANGE — Ajustes
     ========================================== */
  
  --fin-orange-400:   #ea580c;
  --fin-orange-500:   #c2410c;
  
  /* ==========================================
     🎯 CORES SEMÂNTICAS (Light Mode)
     ========================================== */
  
  --fin-success:      var(--fin-green-500);
  --fin-success-soft: rgba(21, 128, 61, 0.12);
  --fin-success-text: #166534;
  
  --fin-danger:       var(--fin-red-500);
  --fin-danger-soft:  rgba(185, 28, 28, 0.12);
  --fin-danger-text:  #991b1b;
  
  --fin-warning:      var(--fin-orange-500);
  --fin-warning-soft: rgba(194, 65, 12, 0.12);
  --fin-warning-text: #9a3412;
  
  --fin-info:         var(--fin-cyan-400);
  --fin-info-soft:    rgba(8, 145, 178, 0.12);
  --fin-info-text:    #0e7490;
  
  /* ==========================================
     📝 TEXTO (Light Mode)
     ========================================== */
  
  --fin-text-primary:   #0f172a;                   /* Títulos */
  --fin-text-secondary: #1e293b;                   /* Corpo */
  --fin-text-muted:     #64748b;                   /* Labels */
  --fin-text-disabled:  #94a3b8;                   /* Desabilitado */
  --fin-text-inverse:   #f9fafb;                   /* Texto em fundo escuro */
  
  /* Aliases de compatibilidade */
  --fin-text-default:   var(--fin-text-secondary);
  --fin-text-strong:    var(--fin-text-primary);
  
  /* ==========================================
     🔲 BORDAS (Light Mode)
     ========================================== */
  
  --fin-border-subtle:  rgba(71, 85, 105, 0.12);
  --fin-border-default: rgba(71, 85, 105, 0.20);
  --fin-border-strong:  rgba(71, 85, 105, 0.35);
  --fin-border-gold:    rgba(202, 138, 4, 0.50);
  --fin-border-focus:   rgba(8, 145, 178, 0.60);
  
  /* ==========================================
     🌫️ SOMBRAS (Light Mode - mais suaves)
     ========================================== */
  
  --fin-shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.05);
  --fin-shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --fin-shadow-md:   0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --fin-shadow-lg:   0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05);
  --fin-shadow-xl:   0 20px 25px rgba(0, 0, 0, 0.10), 0 10px 10px rgba(0, 0, 0, 0.04);
  --fin-shadow-2xl:  0 25px 50px rgba(0, 0, 0, 0.15);
  --fin-shadow-3xl:  0 35px 60px rgba(0, 0, 0, 0.20);
  
  /* Sombras especiais */
  --fin-shadow-card:    0 4px 20px rgba(0, 0, 0, 0.08);
  --fin-shadow-header:  0 4px 12px rgba(0, 0, 0, 0.06);
  --fin-shadow-modal:   0 20px 40px rgba(0, 0, 0, 0.18);
  --fin-shadow-glow:    0 0 20px rgba(202, 138, 4, 0.25);
  --fin-shadow-glow-sm: 0 0 10px rgba(202, 138, 4, 0.15);
  --fin-shadow-cyan:    0 0 16px rgba(8, 145, 178, 0.20);
  
  /* ==========================================
     🎨 GRADIENTES (Light Mode)
     ========================================== */
  
  --fin-grad-gold-cta: linear-gradient(135deg, #ca8a04 0%, #eab308 100%);
  --fin-grad-gold-soft: linear-gradient(135deg, rgba(202, 138, 4, 0.15), rgba(234, 179, 8, 0.08));
  --fin-grad-cyan-soft: linear-gradient(135deg, rgba(8, 145, 178, 0.12), rgba(14, 116, 144, 0.06));
  --fin-grad-card: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  --fin-grad-app-bg: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%);
  
  /* ==========================================
     🖱️ COMPONENTES (Light Mode overrides)
     ========================================== */
  
  /* Inputs */
  --fin-input-bg: #ffffff;
  --fin-input-border: rgba(71, 85, 105, 0.25);
  --fin-input-placeholder: #94a3b8;
  
  /* Botões secundários */
  --fin-btn-secondary-bg: #f1f5f9;
  --fin-btn-secondary-border: rgba(71, 85, 105, 0.25);
  --fin-btn-secondary-text: #334155;
}

/* ==========================================
   🎨 Variáveis de compatibilidade (aliases)
   para tema claro
   ========================================== */

[data-theme="light"] {
  /* Background aliases */
  --fin-bg-base: var(--fin-bg-deep);
  
  /* Text aliases */
  --text: var(--fin-text-secondary);
  --text-main: var(--fin-text-secondary);
  --text-soft: var(--fin-text-muted);
  --text-strong: var(--fin-text-primary);
  --text-muted: var(--fin-text-muted);
  --muted: var(--fin-text-muted);
  
  /* Gold aliases */
  --gold: var(--fin-gold-400);
  --gold-300: var(--fin-gold-300);
  --gold-400: var(--fin-gold-400);
  
  /* Border aliases */
  --border-soft: var(--fin-border-subtle);
  --border-strong: var(--fin-border-strong);
}

/* ==========================================
   🌙 Sistema de preferência do usuário
   (auto-detect)
   ========================================== */

@media (prefers-color-scheme: light) {
  [data-theme="auto"] {
    /* Herda todos os tokens de light mode */
    --fin-bg-deep:      #f8fafc;
    --fin-bg-surface:   #ffffff;
    --fin-bg-card:      #ffffff;
    --fin-bg-elevated:  #f1f5f9;
    --fin-bg-glass:     rgba(255, 255, 255, 0.85);
    --fin-bg-overlay:   rgba(0, 0, 0, 0.50);
    
    --fin-text-primary:   #0f172a;
    --fin-text-secondary: #1e293b;
    --fin-text-muted:     #64748b;
    --fin-text-disabled:  #94a3b8;
    --fin-text-inverse:   #f9fafb;
    
    --fin-gold-400:     #ca8a04;
    --fin-cyan-400:     #0891b2;
    --fin-green-500:    #15803d;
    --fin-red-500:      #b91c1c;
    
    --fin-border-default: rgba(71, 85, 105, 0.20);
    --fin-shadow-card:    0 4px 20px rgba(0, 0, 0, 0.08);
  }
}