:root {
  --primary-color: #f47c2c;
  --primary-dark: #dd6920;
  --secondary-color: #2f241f;
  --bg-color: #f7efe7;
  --card-bg: #fffaf4;
  --border-color: #ead7c7;
  --accent: #f6b37b;
  --danger: #d95c4f;
  --warning: #efb15f;
  --success: #69b578;
  --text: #372922;
  --text-muted: #8d7668;
  --white: #ffffff;
  --radius-xl: 22px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --shadow-soft: 0 18px 45px rgba(122, 88, 64, 0.12);
  --shadow-card: 0 12px 28px rgba(122, 88, 64, 0.10);
  --shadow-hover: 0 16px 34px rgba(244, 124, 44, 0.16);
}

/* ===== Reset básico ===== */

*,
*::before,
*::after {
margin: 0;
padding: 0;
  box-sizing: border-box;
   scrollbar-width: thin;
  scrollbar-color: rgba(122, 88, 64, 0.3) transparent;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top, rgba(247, 198, 150, 0.28) 0, rgba(247, 239, 231, 0.96) 34%),
    linear-gradient(180deg, #fffaf5 0%, #f7efe7 100%);
  color: var(--text);
}

/* ==========================================================================
   PERSONALIZAÇÃO DA BARRA DE ROLAGEM GLOBAL
   ========================================================================== */

/* 1. Suaviza a rolagem da página inteira */
html {
  scroll-behavior: smooth;
}

/* 2. Configura a largura da barra (Navegadores Chrome, Safari, Edge, Opera) */
::-webkit-scrollbar {
  width: 8px;               /* Largura da barra vertical */
  height: 8px;              /* Altura da barra horizontal */
}

/* 3. O fundo da barra (onde o indicador desliza) */
::-webkit-scrollbar-track {
  background: transparent;  /* Fica invisível e limpo */
}

/* 4. O indicador que mexe (o "bastonete") */
::-webkit-scrollbar-thumb {
  background-color: rgba(122, 88, 64, 0.3); /* Tom marrom suave do seu modal */
  border-radius: 10px;       /* Deixa as pontas arredondadas modernas */
  border: 2px solid transparent; /* Cria um respiro em volta do indicador */
}

/* 5. Efeito quando o usuário passa o mouse por cima */
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(244, 124, 44, 0.6); /* Muda para a cor laranja do botão Salvar */
}