/* ============================================
   CARTÃO BLACK SAÚDE - SISTEMA DE CORES
   Preto, Verde e Dourado Ouro
   ============================================ */

:root {
    /* Cores Principais */
    --color-black: #e8f5e9;
    --color-black-light: #c8e6c9;
    --color-black-lighter: #a5d6a7;
    
    --color-green: #009639;
    --color-green-light: #00b347;
    --color-green-dark: #007a2e;
    
    --color-gold: #DAA520;
    --color-gold-light: #FFD700;
    --color-gold-dark: #B8860B;
    
    /* Cores Complementares */
    --color-white: #FFFFFF;
    --color-gray: #666666;
    --color-gray-light: #999999;
    --color-gray-lighter: #CCCCCC;
    
    /* Gradientes */
    --gradient-gold: linear-gradient(135deg, var(--color-gold-dark), var(--color-gold), var(--color-gold-light));
    --gradient-green: linear-gradient(135deg, var(--color-green-dark), var(--color-green), var(--color-green-light));
    --gradient-dark: linear-gradient(180deg, var(--color-black), var(--color-black-light));
    
    /* Sombras */
    --shadow-sm: 0 2px 4px rgba(218, 165, 32, 0.1);
    --shadow-md: 0 4px 8px rgba(218, 165, 32, 0.2);
    --shadow-lg: 0 8px 16px rgba(218, 165, 32, 0.3);
    --shadow-xl: 0 12px 24px rgba(218, 165, 32, 0.4);
    
    --shadow-green: 0 4px 12px rgba(0, 150, 57, 0.3);
    --shadow-gold: 0 4px 12px rgba(218, 165, 32, 0.5);
    
    /* Transparências */
    --overlay-dark: rgba(0, 0, 0, 0.8);
    --overlay-medium: rgba(0, 0, 0, 0.5);
    --overlay-light: rgba(0, 0, 0, 0.3);
    
    /* Bordas */
    --border-gold: 2px solid var(--color-gold);
    --border-green: 2px solid var(--color-green);
    --border-gray: 1px solid var(--color-gray);
    
    /* Transições */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 50%;
    
    /* Espaçamentos */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-xxl: 4rem;
}

/* Tema Verde Claro (Padrão) */
body {
    background-color: var(--color-black);
    color: #1b5e20;
}

/* Classes Utilitárias de Cores */
.text-gold { color: var(--color-gold); }
.text-green { color: var(--color-green); }
.text-white { color: var(--color-white); }
.text-gray { color: var(--color-gray); }

.bg-black { background-color: var(--color-black); }
.bg-black-light { background-color: var(--color-black-light); }
.bg-green { background-color: var(--color-green); }
.bg-gold { background-color: var(--color-gold); }

.bg-gradient-gold { background: var(--gradient-gold); }
.bg-gradient-green { background: var(--gradient-green); }
.bg-gradient-dark { background: var(--gradient-dark); }

.border-gold { border: var(--border-gold); }
.border-green { border: var(--border-green); }

.shadow-gold { box-shadow: var(--shadow-gold); }
.shadow-green { box-shadow: var(--shadow-green); }