:root {
    /* Cores */
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-cream-50: #FCFCF9;
    --color-cream-100: #FFFFFE;
    --color-slate-900: #134252;
    --color-teal-500: #8B6F47;
    --color-teal-600: #ffffffbd;
    --color-teal-700: #1A6C73;
    --color-brown-600: #5E5240;
    --color-charcoal-700: #8B6F47;
    --color-charcoal-800: #262828;
    --color-red-500: #C0152F;
    --color-orange-500: #A84B2F;

    /* Tipografia */
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    --font-size-3xl: 24px;
    --font-size-4xl: 27px;

    /* Espaçamento */
    --space-4: 4px;
    --space-8: 8px;
    --space-16: 16px;
    --space-20: 20px;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-base: 8px;

    /* Animações */
    --duration-fast: 150ms;
    --duration-normal: 250ms;
}

/* CSS primário baseado em variáveis */
body { font-size: var(--font-size-base); color: var(--color-slate-900); }
h1 { font-size: var(--font-size-4xl); color: var(--color-charcoal-800); }
h2 { font-size: var(--font-size-3xl); color: var(--color-charcoal-800); }
h3 { font-size: var(--font-size-2xl); color: var(--color-charcoal-700); }

button, .btn-primary { 
    background-color: var(--color-teal-500);
    border-radius: var(--radius-base);
    padding: var(--space-8) var(--space-16);
    transition: all var(--duration-fast);
}

button:hover, .btn-primary:hover { 
    background-color: var(--color-teal-600);
}

button:active, .btn-primary:active { 
    background-color: var(--color-teal-700);
}

.hero-section { background-color: var(--color-brown-600); color: var(--color-white); }
.form-input { border-radius: var(--radius-base); border: 1px solid var(--color-cream-50); }