:root {
  /* Cores de Marca */
  --ar2p2-color-petrol: #0D2C34;
  --ar2p2-color-green: #00C896;
  --ar2p2-color-gray: #7A8B8E;

  /* Aplicacao Semantica e Interface */
  --ar2p2-bg: #FFFFFF;
  --ar2p2-bg-secondary: #F8FAFC;
  --ar2p2-border: #E2E8F0;
  --ar2p2-text: #0D2C34;
  --ar2p2-muted: #7A8B8E;

  /* Estados de Acao e Alerta */
  --ar2p2-success: #00C896;
  --ar2p2-success-light: #E6F9F4;
  --ar2p2-danger: #EF4444;
  --ar2p2-danger-light: #FEF2F2;
  --ar2p2-info-bg: #DBEAFE;
  --ar2p2-info-text: #1E40AF;

  /* Botoes primarios */
  --ar2p2-btn-primary-bg: #00D084;
  --ar2p2-btn-primary-text: #0D2C34;
  --ar2p2-btn-primary-hover-bg: #0D2C34;
  --ar2p2-btn-primary-hover-text: #00D084;

  /* Espacamento */
  --ar2p2-space-xs: 4px;
  --ar2p2-space-sm: 8px;
  --ar2p2-space-md: 16px;
  --ar2p2-space-lg: 24px;
  --ar2p2-space-xl: 32px;
  --ar2p2-space-2xl: 48px;

  /* Geometria e Profundidade */
  --ar2p2-radius-card: 16px;
  --ar2p2-radius-pill: 10px;
  --ar2p2-shadow-card: 0 4px 6px -1px rgba(13, 44, 52, 0.05), 0 2px 4px -1px rgba(13, 44, 52, 0.03);
  --ar2p2-shadow-hover: 0 10px 15px -3px rgba(13, 44, 52, 0.1), 0 4px 6px -2px rgba(13, 44, 52, 0.05);
}