/* ===================================
   WAULT - DESIGN SYSTEM
   Sistema de Cores Verde Profissional
   Com suporte a Dark Mode
   =================================== */

:root {
  /* =========================================
     PALETA PRINCIPAL - VERDE PROFISSIONAL
     Cor primaria verde com tons complementares
     ========================================= */

  /* Cor de Destaque - Verde Profissional */
  --color-accent: #10B981;
  --color-accent-hover: #059669;
  --color-accent-light: #D1FAE5;
  --color-accent-muted: #6EE7B7;
  --color-accent-dark: #047857;

  /* Aliases para compatibilidade */
  --color-primary: var(--color-accent);
  --color-primary-hover: var(--color-accent-hover);
  --color-primary-light: var(--color-accent-light);

  /* Cores Semanticas */
  --color-success: #22C55E;
  --color-success-light: rgba(34, 197, 94, 0.08);
  --color-success-dark: #16A34A;

  --color-warning: #F59E0B;
  --color-warning-light: rgba(245, 158, 11, 0.08);
  --color-warning-dark: #D97706;

  --color-danger: #EF4444;
  --color-danger-light: rgba(239, 68, 68, 0.06);
  --color-danger-dark: #DC2626;

  --color-info: #3B82F6;
  --color-info-light: rgba(59, 130, 246, 0.08);
  --color-info-dark: #2563EB;

  /* =========================================
     CORES FINANCEIRAS
     ========================================= */
  --color-income: #22C55E;
  --color-income-bg: rgba(34, 197, 94, 0.06);
  --color-income-text: #16A34A;

  --color-expense: #EF4444;
  --color-expense-bg: rgba(239, 68, 68, 0.05);
  --color-expense-text: #DC2626;

  /* =========================================
     SUPERFICIES E FUNDOS - LIGHT MODE
     Clean, arejado, elegante
     ========================================= */
  --bg-app: #FAFAFA;                   /* Fundo da aplicacao */
  --bg-primary: #FFFFFF;               /* Cards e superficies */
  --bg-secondary: #F5F5F5;             /* Fundos sutis */
  --bg-tertiary: #EFEFEF;              /* Hover e estados */
  --bg-elevated: #FFFFFF;              /* Elementos elevados */

  /* Header */
  --bg-header: #FFFFFF;
  --header-border: #E8E8E8;

  /* =========================================
     CORES DE TEXTO
     ========================================= */
  --text-primary: #1A1A1A;             /* Titulos e texto principal */
  --text-secondary: #6B6B6B;           /* Texto secundario */
  --text-muted: #9CA3AF;               /* Texto desabilitado */
  --text-placeholder: #BFBFBF;         /* Placeholders */
  --text-inverse: #FFFFFF;             /* Texto em fundos escuros */

  /* =========================================
     BORDAS - Sutis e elegantes
     ========================================= */
  --border-color: #E5E5E5;
  --border-light: #F0F0F0;
  --border-dark: #D4D4D4;

  /* =========================================
     SOMBRAS - Minimalistas
     Quase imperceptiveis, muito elegantes
     ========================================= */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.08);

  /* Sombra para cards em hover */
  --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.08);

  /* =========================================
     TIPOGRAFIA - Inter
     Clean, profissional, legivel
     ========================================= */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* Tamanhos - Escala refinada */
  --font-size-xs: 0.6875rem;           /* 11px */
  --font-size-sm: 0.8125rem;           /* 13px */
  --font-size-base: 0.875rem;          /* 14px */
  --font-size-md: 1rem;                /* 16px */
  --font-size-lg: 1.125rem;            /* 18px */
  --font-size-xl: 1.5rem;              /* 24px */
  --font-size-2xl: 2rem;               /* 32px */
  --font-size-3xl: 2.5rem;             /* 40px */
  --font-size-4xl: 3rem;               /* 48px */

  /* Pesos */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Altura de linha */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;

  /* Letter spacing */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;

  /* =========================================
     ESPACAMENTO - Consistente e generoso
     ========================================= */
  --spacing-0: 0;
  --spacing-1: 0.25rem;                /* 4px */
  --spacing-2: 0.5rem;                 /* 8px */
  --spacing-3: 0.75rem;                /* 12px */
  --spacing-4: 1rem;                   /* 16px */
  --spacing-5: 1.25rem;                /* 20px */
  --spacing-6: 1.5rem;                 /* 24px */
  --spacing-8: 2rem;                   /* 32px */
  --spacing-10: 2.5rem;                /* 40px */
  --spacing-12: 3rem;                  /* 48px */
  --spacing-16: 4rem;                  /* 64px */
  --spacing-20: 5rem;                  /* 80px */

  /* =========================================
     BORDER RADIUS - Suaves e modernos
     ========================================= */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  /* =========================================
     TRANSICOES - Suaves
     ========================================= */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-slower: 400ms ease;

  /* Easing personalizado */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* =========================================
     Z-INDEX
     ========================================= */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 250;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  /* =========================================
     LAYOUT - Navegacao Superior
     ========================================= */
  --header-height: 64px;
  --content-max-width: 1280px;
  --content-padding: var(--spacing-8);

  /* Container widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;

  /* =========================================
     COMPONENTES - Configuracoes
     ========================================= */

  /* Botoes */
  --btn-height: 44px;
  --btn-height-sm: 36px;
  --btn-height-lg: 52px;
  --btn-padding-x: var(--spacing-5);
  --btn-radius: var(--radius-md);

  /* Inputs */
  --input-height: 48px;
  --input-height-sm: 40px;
  --input-padding-x: var(--spacing-4);
  --input-radius: var(--radius-md);
  --input-border: var(--border-color);
  --input-border-focus: var(--color-accent);
  --input-bg: var(--bg-primary);

  /* Cards */
  --card-padding: var(--spacing-6);
  --card-radius: var(--radius-xl);
  --card-border: var(--border-light);
  --card-bg: var(--bg-primary);

  /* Modal */
  --modal-backdrop: rgba(0, 0, 0, 0.4);
  --modal-backdrop-blur: 4px;
  --modal-radius: var(--radius-2xl);
  --modal-padding: var(--spacing-8);
  --modal-shadow: 0 24px 48px rgba(0, 0, 0, 0.12);

  /* Toast */
  --toast-radius: var(--radius-lg);
  --toast-shadow: var(--shadow-lg);
}

/* =========================================
   DARK MODE
   Ativado via data-theme="dark" no html
   ========================================= */
[data-theme="dark"] {
  /* Cor de Destaque - Verde (mantido) */
  --color-accent: #10B981;
  --color-accent-hover: #34D399;
  --color-accent-light: rgba(16, 185, 129, 0.15);
  --color-accent-muted: #6EE7B7;
  --color-accent-dark: #059669;

  /* Cores Semanticas - Ajustadas para dark mode */
  --color-success: #34D399;
  --color-success-light: rgba(52, 211, 153, 0.12);
  --color-success-dark: #10B981;

  --color-warning: #FBBF24;
  --color-warning-light: rgba(251, 191, 36, 0.12);
  --color-warning-dark: #F59E0B;

  --color-danger: #F87171;
  --color-danger-light: rgba(248, 113, 113, 0.12);
  --color-danger-dark: #EF4444;

  --color-info: #60A5FA;
  --color-info-light: rgba(96, 165, 250, 0.12);
  --color-info-dark: #3B82F6;

  /* Cores Financeiras - Dark Mode */
  --color-income: #34D399;
  --color-income-bg: rgba(52, 211, 153, 0.1);
  --color-income-text: #6EE7B7;

  --color-expense: #F87171;
  --color-expense-bg: rgba(248, 113, 113, 0.1);
  --color-expense-text: #FCA5A5;

  /* Superficies e Fundos - Dark Mode (Preto/Cinza Escuro) */
  --bg-app: #0A0A0A;                   /* Preto - fundo principal */
  --bg-primary: #141414;               /* Cards e superficies */
  --bg-secondary: #1C1C1C;             /* Fundos sutis */
  --bg-tertiary: #262626;              /* Hover e estados */
  --bg-elevated: #1C1C1C;              /* Elementos elevados */

  /* Header - Dark Mode */
  --bg-header: #0F0F0F;
  --header-border: #262626;

  /* Cores de Texto - Dark Mode */
  --text-primary: #F9FAFB;             /* Titulos e texto principal */
  --text-secondary: #9CA3AF;           /* Texto secundario */
  --text-muted: #6B7280;               /* Texto desabilitado */
  --text-placeholder: #4B5563;         /* Placeholders */
  --text-inverse: #060721;             /* Texto em fundos claros */

  /* Bordas - Dark Mode (Cinza escuro) */
  --border-color: #2A2A2A;
  --border-light: #1F1F1F;
  --border-dark: #3A3A3A;

  /* Sombras - Dark Mode (mais intensas) */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7);

  /* Sombra para cards em hover - Dark Mode */
  --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.5);

  /* Modal - Dark Mode */
  --modal-backdrop: rgba(0, 0, 0, 0.7);
  --modal-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);

  /* Input - Dark Mode */
  --input-bg: var(--bg-secondary);
  --card-bg: var(--bg-primary);
  --card-border: var(--border-color);
}

/* =========================================
   BREAKPOINTS (referencia para media queries)
   ========================================= */
/*
  Mobile:  < 640px
  Tablet:  640px - 1023px
  Desktop: >= 1024px

  @media (max-width: 639px) { mobile }
  @media (min-width: 640px) and (max-width: 1023px) { tablet }
  @media (min-width: 1024px) { desktop }
*/