/* Variáveis CSS */
:root {
  /* Cores Principais */
  --color-primary: #B4ED00;
  --color-dark: #202020;
  --color-light: #F9F9F9;
  
  /* Cores Secundárias */
  --color-gray-medium: #A6A6A6;
  --color-gray-light: #E5E5E5;
  --color-primary-dark: #8CB800;
  --color-primary-light: #D6FF7E;
  
  /* Cores de Estado */
  --color-success: #34C759;
  --color-error: #FF3B30;
  --color-warning: #FFCC00;
  --color-info: #007AFF;
  
  /* Gradientes */
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  --gradient-dark: linear-gradient(135deg, var(--color-dark) 0%, #000000 100%);
}

/* Exemplos de uso */
.bg-primary { background-color: var(--color-primary); }
.bg-dark { background-color: var(--color-dark); }
.bg-light { background-color: var(--color-light); }

.text-primary { color: var(--color-primary); }
.text-dark { color: var(--color-dark); }
.text-light { color: var(--color-light); }

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-dark);
}

.btn-secondary {
  background-color: var(--color-dark);
  color: var(--color-light);
}

.btn-outline {
  background-color: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-dark);
}

// colors.ts
export const colors = {
  // Cores Principais
  primary: '#B4ED00',
  dark: '#202020',
  light: '#F9F9F9',
  
  // Cores Secundárias
  grayMedium: '#A6A6A6',
  grayLight: '#E5E5E5',
  primaryDark: '#8CB800',
  primaryLight: '#D6FF7E',
  
  // Cores de Estado
  success: '#34C759',
  error: '#FF3B30',
  warning: '#FFCC00',
  info: '#007AFF',
  
  // Gradientes
  gradients: {
    primary: ['#B4ED00', '#8CB800'],
    dark: ['#202020', '#000000'],
  },
  
  // Texto
  textDark: '#202020',
  textLight: '#F9F9F9',
  textSecondaryDark: '#666666',
  textSecondaryLight: '#A6A6A6',
};

// Exemplo de uso com styled-components
import styled from 'styled-components/native';
import { colors } from './colors';

export const PrimaryButton = styled.TouchableOpacity`
  background-color: ${colors.primary};
  padding: 12px 24px;
  border-radius: 8px;
`;

export const PrimaryButtonText = styled.Text`
  color: ${colors.dark};
  font-weight: 500;
  font-size: 16px;
`;