/* Estilos e Variáveis Fixas de Cores */
:root {
    --color-primary: #C57D5D;     /* Terracota Suave */
    --color-secondary: #2D4A43;   /* Verde Floresta Profundo */
    --color-accent: #E5C3A6;      /* Areia Quente / Champagne */
    --color-bg: #FAF8F5;          /* Off-White Minimalista */
    --color-text-dark: #1E1E1E;   /* Grafite Escuro */
    --color-text-light: #F4F0EB;  /* Creme Suave */
}

body {
    background-color: var(--color-bg);
    color: var(--color-text-dark);
    font-family: 'Inter', sans-serif;
    transition: background-color 0.4s ease, color 0.4s ease;
}

.font-display {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Classes utilitárias com variáveis CSS */
.text-primary { color: var(--color-primary); }
.bg-primary { background-color: var(--color-primary); }
.border-primary { border-color: var(--color-primary); }

.text-secondary { color: var(--color-secondary); }
.bg-secondary { background-color: var(--color-secondary); }
.border-secondary { border-color: var(--color-secondary); }

.text-accent { color: var(--color-accent); }
.bg-accent { background-color: var(--color-accent); }

.bg-custom-bg { background-color: var(--color-bg); }
.text-dark { color: var(--color-text-dark); }
.border-dark { border-color: var(--color-text-dark); }

/* Estilização fina de scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--color-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 4px;
}

/* Efeito de hover suave e editorial */
.editorial-hover {
    position: relative;
    overflow: hidden;
}
.editorial-hover::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: currentColor;
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}
.editorial-hover:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}