:root {
  /* Cores principais */
  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-primary-disabled: #93C5FD;

  --color-teal: #14B8A6;
  --color-teal-hover: #0D9488;
  --color-teal-soft: #5EEAD4;

  --color-ai: #8B5CF6;

  /* Fundo claro (landing) */
  --color-bg-light: #F8FAFC;
  --color-card-light: #FFFFFF;
  --color-border-light: #E2E8F0;

  /* Fundo escuro (dashboard) */
  --color-bg-dark: #0F172A;
  --color-surface-dark: #1E293B;
  --color-surface-dark-alt: #334155;

  /* Texto (dark mode) */
  --color-text-dark-primary: #F8FAFC;
  --color-text-dark-secondary: #CBD5E1;
  --color-text-dark-muted: #94A3B8;

  /* Texto (light mode) */
  --color-text-light-primary: #0F172A;
  --color-text-light-secondary: #334155;
  --color-text-light-muted: #64748B;

  /* Status */
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: #3B82F6;
  --color-neutral: #64748B;  /* Métricas estáveis, variações neutras */

  /* Gradientes */
  --gradient-cta: linear-gradient(135deg, #2563EB 0%, #14B8A6 100%);
  --gradient-ai: linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(99, 102, 241, 0.16));

  /* Espaçamento (base 8px) */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-2xl: 3rem;     /* 48px */

  /* Border radius */
  --radius-sm: 0.5rem;     /* 8px */
  --radius-md: 0.75rem;    /* 12px */
  --radius-lg: 1rem;       /* 16px */

  /* Sombras (atualizadas para dark mode) */
  --shadow-card: 0 4px 8px rgba(15, 23, 42, 0.35);
  --shadow-modal: 0 20px 40px rgba(15, 23, 42, 0.55);

  /* Transições */
  --transition-fast: 0.15s ease-in-out;
  --transition-base: 0.2s ease-in-out;
  --transition-slow: 0.3s ease-in-out;
}

/* Reset básico e configurações globais */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tipografia base */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.2;
}

h1 {
  font-size: 2.5rem;   /* 40px */
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  font-size: 2rem;     /* 32px */
  line-height: 1.3;
}

h3 {
  font-size: 1.5rem;   /* 24px */
  line-height: 1.4;
}

h4 {
  font-size: 1.25rem;  /* 20px */
  line-height: 1.4;
}

/* Utilitários para modo dark/light */
.dark-mode {
  background-color: var(--color-bg-dark);
  color: var(--color-text-dark-primary);
}

.light-mode {
  background-color: var(--color-bg-light);
  color: var(--color-text-light-primary);
}

/* Variações de métricas */
.metric-up {
  color: var(--color-teal);
}

.metric-up::before {
  content: '↑';
  margin-right: 0.25rem;
}

.metric-down {
  color: var(--color-error);
}

.metric-down::before {
  content: '↓';
  margin-right: 0.25rem;
}

.metric-flat {
  color: var(--color-neutral);
}

.metric-flat::before {
  content: '—';
  margin-right: 0.25rem;
}

/* Skeleton/Loading states */
.skeleton {
  background: var(--color-surface-dark);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}

.skeleton::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-surface-dark-alt);
  opacity: 0.5;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.3;
  }
}