/* ============================================
   Soleil Cafe - Paleta de Cores
   Marca: Espresso, Caramelo e Bege Quente
   Atualizado: 2026-02-21
   ============================================ */

:root {
  /* ===== COR PRINCIPAL - MARROM CAFÉ MÉDIO ===== */
  --primary: #67431F;           /* Marrom café médio — identidade principal */
  --primary-hover: #4E3217;     /* 15% mais escuro para estados hover */
  --primary-disabled: #B39270;  /* Desaturado para estados desabilitados */
  --primary-lighter: #F0E8DC;   /* Bege muito suave para backgrounds de destaque */
  --primary-darker: #311D0C;    /* Espresso profundo — variação mais escura */
  --primary-text: #67431F;      /* Tom café para texto em fundos claros */

  /* ===== COR SECUNDÁRIA - BEGE DOURADO SUAVE ===== */
  --secondary: #BA976A;         /* Bege dourado suave — acento quente */
  --secondary-hover: #9E7E52;   /* Dourado escurecido para hover */
  --secondary-disabled: #DDD1BB; /* Tom neutro claro para disabled */
  --secondary-lighter: #F5F0E6;  /* Bege muito claro para backgrounds */
  --secondary-darker: #96753E;   /* Dourado mais profundo */

  /* ===== COR ACCENT - CARAMELO QUENTE ===== */
  --accent: #9B6937;            /* Caramelo quente — chamadas à ação, destaques */
  --accent-hover: #7E5229;      /* Caramelo escurecido para hover */
  --accent-disabled: #CDA882;   /* Tom suavizado para disabled */
  --accent-lighter: #F0E5D6;    /* Caramelo quase branco para fundos */
  --accent-darker: #67431F;     /* Caramelo profundo — converge ao café */

  /* ===== NEUTROS - BEGE CREME E OFF-WHITE ===== */
  --background: #FDFDFC;         /* Off-white quente — fundo principal */
  --background-alt: #F2EDE4;     /* Bege creme suave para seções alternadas */
  --background-dark: #E6DDD0;    /* Bege médio para cards e separadores */
  --background-darker: #D3C3AC;  /* Bege creme claro — bordas e superfícies */

  --text: #311D0C;               /* Espresso profundo — texto principal */
  --text-muted: #7A5C3A;         /* Café médio para textos secundários */
  --text-light: #9B8268;         /* Tom caramelo claro para hints e labels */

  --border: #C8B89E;             /* Bege médio para bordas padrão */
  --border-dark: #B09E84;        /* Bege escuro para bordas de ênfase */
  --border-light: #E0D7CA;       /* Bege claríssimo para divisores suaves */

  /* ===== UTILITÁRIOS ===== */
  --success: #4A7A50;            /* Verde musgo elegante */
  --success-lighter: #E8F2EA;

  --warning: #9B6937;            /* Usa o caramelo como alerta quente */
  --warning-lighter: #F0E5D6;

  --error: #8B3A2E;              /* Terracota escuro — erro sem agredir */
  --error-lighter: #F8ECEA;

  --info: #5A6B78;               /* Azul acinzentado neutro */
  --info-lighter: #E8ECEF;

  /* ===== SOBREPOSIÇÕES E SOMBRAS ===== */
  --overlay: rgba(49, 29, 12, 0.55);         /* Overlay escuro espresso */
  --overlay-light: rgba(253, 253, 252, 0.95); /* Overlay claro off-white */

  --shadow-sm: 0 1px 2px 0 rgba(49, 29, 12, 0.06);
  --shadow: 0 4px 6px -1px rgba(49, 29, 12, 0.12), 0 2px 4px -1px rgba(49, 29, 12, 0.07);
  --shadow-md: 0 10px 15px -3px rgba(49, 29, 12, 0.12), 0 4px 6px -2px rgba(49, 29, 12, 0.06);
  --shadow-lg: 0 20px 25px -5px rgba(49, 29, 12, 0.12), 0 10px 10px -5px rgba(49, 29, 12, 0.05);
  --shadow-xl: 0 25px 50px -12px rgba(49, 29, 12, 0.28);

  /* ===== GRADIENTES ===== */
  --gradient-primary: linear-gradient(135deg, #9B6937 0%, #67431F 100%);
  --gradient-hero: linear-gradient(to bottom, rgba(49, 29, 12, 0.65), rgba(103, 67, 31, 0.85));
  --gradient-overlay: linear-gradient(to bottom, transparent, rgba(49, 29, 12, 0.65));
}

/* ===== CLASSES UTILITÁRIAS ===== */

/* Backgrounds */
.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-accent { background-color: var(--accent); }
.bg-neutral { background-color: var(--background-alt); }

/* Textos */
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-accent { color: var(--accent); }
.text-muted { color: var(--text-muted); }

/* Bordas */
.border-primary { border-color: var(--primary); }
.border-secondary { border-color: var(--secondary); }
.border-neutral { border-color: var(--border); }

/* Hover States */
.hover-primary:hover { background-color: var(--primary-hover); }
.hover-secondary:hover { background-color: var(--secondary-hover); }
.hover-accent:hover { background-color: var(--accent-hover); }

/* Gradientes */
.gradient-primary { background: var(--gradient-primary); }
.gradient-hero { background: var(--gradient-hero); }
.gradient-overlay { background: var(--gradient-overlay); }