/*
 * DESIGN SYSTEM — CORES E APARÊNCIA DO rupps.crm
 *
 * COMO EDITAR
 * 1. Procure abaixo o elemento que você quer mudar, como FUNDO DOS CARDS.
 * 2. Altere os três números depois dos dois-pontos, mantendo o ponto e vírgula.
 *    Exemplo: 60 225 124 é o verde #3CE17C (vermelho, verde e azul, de 0 a 255).
 *    Não coloque # nem vírgulas nesses valores. O HEX no comentário é só referência.
 * 3. var(--ds-primary) significa "usar o mesmo valor da cor primary".
 *    Você pode substituir por três números para dar uma cor independente ao elemento.
 * 4. Depois de alterar, execute npm run build e confira o resultado na interface.
 *
 * ATENÇÃO: uma mesma cor pode ser compartilhada por vários elementos.
 * Os tons claros/escuros não são recalculados quando você muda a cor principal.
 * As descrições abaixo valem para os componentes ligados a este tema.
 * Logos, imagens e cores próprias de algumas integrações não mudam por este arquivo.
 */
:root {

  /* ===== 1. MARCA — verdes, textos de ação e áreas selecionadas ===== */

  /* Verde quase branco: fundo suave de itens selecionados e áreas ao passar o mouse. Cor atual: #F1FCF5. */
  --ds-brand-50: 241 252 245;

  /* Verde névoa: caixas suaves, seleções e áreas de apoio. Cor atual: #E3FAEC. */
  --ds-mist: 227 250 236;

  /* Verde claro: bordas suaves, barras secundárias e partes claras dos gráficos. Cor atual: #BAF3CF. */
  --ds-brand-200: 186 243 207;

  /* Verde intermediário: bordas de destaque e detalhes de seleção. Cor atual: #8BECAD. */
  --ds-brand-300: 139 236 173;

  /* Verde vivo claro: realce de controles; também é a cor usada pelo hover do botão principal. Cor atual: #5BE790. */
  --ds-brand-400: 91 231 144;

  /* Verde médio: indicadores, marcadores, seleções e séries de gráficos. Cor atual: #28AF60. */
  --ds-brand-500: 40 175 96;

  /* VERDE PRINCIPAL DA MARCA: gráficos e detalhes principais. Os botões também usam esta cor por padrão. Cor atual: #3CE17C. */
  --ds-primary: 60 225 124;

  /* Verde escuro: links, textos de ação e ícones destacados sobre fundo claro. Cor atual: #16733D. */
  --ds-link: 22 115 61;

  /* TEXTO PRINCIPAL: títulos e textos mais escuros. Também alimenta o texto dos botões por padrão. Cor atual: #1D1D1D. */
  --ds-text: 29 29 29;

  /* Verde quase preto: áreas escuras e início de alguns degradês de destaque. Cor atual: #142A1D. */
  --ds-brand-900: 20 42 29;


  /* ===== 2. DESTAQUES — família verde-limão ===== */

  /* Limão quase branco: fundo muito suave de áreas com destaque secundário. Cor atual: #F7FBEA. */
  --ds-accent-50: 247 251 234;

  /* Limão bem claro: caixas e etiquetas de destaque suave. Cor atual: #EFF7D3. */
  --ds-accent-100: 239 247 211;

  /* Limão claro: partes secundárias de gráficos e detalhes suaves. Cor atual: #E3F2AD. */
  --ds-accent-200: 227 242 173;

  /* Limão intermediário: tom auxiliar disponível para detalhes de destaque. Cor atual: #D9EF8B. */
  --ds-accent-300: 217 239 139;

  /* Limão vivo claro: fundo dos botões de destaque ao passar o mouse. Cor atual: #D1EE78. */
  --ds-accent-400: 209 238 120;

  /* VERDE-LIMÃO DE DESTAQUE: botões secundários destacados, etiquetas e séries de gráficos. Cor atual: #CBED66. */
  --ds-highlight: 203 237 102;

  /* Limão escuro: tom auxiliar para contraste em detalhes da família de destaque. Cor atual: #526B18. */
  --ds-accent-600: 82 107 24;

  /* Limão bem escuro: textos e ícones de destaque que precisam ser legíveis em fundo claro. Cor atual: #3C5010. */
  --ds-accent-700: 60 80 16;


  /* ===== 3. FUNDOS, BORDAS E TEXTOS DE APOIO ===== */

  /* FUNDO DOS CARDS: também colore menus, campos e superfícies que usam a classe white. Cor atual: #FCFDFC. */
  --ds-card: 252 253 252;

  /* FUNDO GERAL DAS TELAS: área atrás dos cards e outras superfícies bem claras. Cor atual: #F7FAF8. */
  --ds-background: 247 250 248;

  /* BORDAS SUAVES: linhas de separação, contornos claros e fundos neutros de gráficos. Cor atual: #E1EBE4. */
  --ds-border: 225 235 228;

  /* BORDAS MAIS VISÍVEIS: contorno de campos, seletores e controles. Cor atual: #CDDAD1. */
  --ds-border-strong: 205 218 209;

  /* Cinza esverdeado claro: contornos e detalhes discretos da família outline. Cor atual: #91A397. */
  --ds-outline-300: 145 163 151;

  /* Cinza esverdeado: textos de apoio e detalhes que usam a família outline. Outros textos secundários usam gray abaixo. Cor atual: #53675A. */
  --ds-text-secondary: 83 103 90;

  /* Cinza esverdeado escuro: textos e ícones mais fortes, incluindo a classe gray-700. Cor atual: #354A3C. */
  --ds-outline-700: 53 74 60;


  /* ===== 4. STATUS — sucesso, erro e aviso ===== */

  /* SUCESSO — fundo claro: caixas que indicam resultado positivo. Cor atual: #E6F9F0. */
  --ds-success-50: 230 249 240;

  /* SUCESSO — apoio: bordas e fundos um pouco mais marcados. Cor atual: #C3F0D9. */
  --ds-success-100: 195 240 217;

  /* SUCESSO — cor principal: ícones, indicadores e sinalização positiva. Cor atual: #36B37E. */
  --ds-success-500: 54 179 126;

  /* SUCESSO — tom escuro: realces e variações de estado positivo. Cor atual: #2D9F6F. */
  --ds-success-600: 45 159 111;

  /* ERRO — fundo claro: caixas de erro e mensagens de atenção crítica. Cor atual: #FFEBE6. */
  --ds-danger-50: 255 235 230;

  /* ERRO — apoio: bordas e fundos de alertas de erro. Cor atual: #FFD2CC. */
  --ds-danger-100: 255 210 204;

  /* ERRO — cor principal: ícones, indicadores negativos e ações destrutivas. Cor atual: #FF5630. */
  --ds-danger-500: 255 86 48;

  /* ERRO — tom escuro: realces de ações destrutivas e alertas. Cor atual: #DE350B. */
  --ds-danger-600: 222 53 11;

  /* AVISO — fundo claro: caixas de aviso que usam a família warning. Cor atual: #FFF8E6. */
  --ds-warning-50: 255 248 230;

  /* AVISO — cor principal: indicadores e ícones de aviso da família warning. Cor atual: #FFAB00. */
  --ds-warning-500: 255 171 0;


  /* ===== 5. TEXTOS E FUNDOS NEUTROS ===== */

  /* Neutro muito claro: fundos discretos, áreas desabilitadas e separações suaves. Cor atual: #EDF3EF. */
  --ds-gray-100: 237 243 239;

  /* Texto discreto: rótulos, placeholders e ícones de apoio. Cor atual: #728579. */
  --ds-gray-400: 114 133 121;

  /* Texto secundário: descrições, informações auxiliares e ícones. Cor atual: #5E7064. */
  --ds-gray-500: 94 112 100;

  /* Texto intermediário: conteúdo que precisa de mais contraste que as descrições. Cor atual: #4B5F52. */
  --ds-gray-600: 75 95 82;

  /* Texto escuro esverdeado: títulos e conteúdo que usam a classe gray-800. Cor atual: #26382C. */
  --ds-gray-800: 38 56 44;


  /* ===== 6. AJUSTES POR ELEMENTO — botões, cantos e sombras ===== */

  /* FUNDO DO BOTÃO PRINCIPAL: usa a cor primary. Troque por RGB para mudar só os botões. */
  --ds-button: var(--ds-primary);

  /* TEXTO DO BOTÃO PRINCIPAL: usa a cor text. Escolha uma cor legível sobre o fundo do botão. */
  --ds-button-text: var(--ds-text);

  /* BOTÃO AO PASSAR O MOUSE: usa brand-400. Troque por RGB para personalizar esse estado. */
  --ds-button-hover: var(--ds-brand-400);

  /* ARREDONDAMENTO DOS CARDS que usam rounded-2xl: valor maior = cantos mais redondos. */
  --ds-card-radius: 16px;

  /* ARREDONDAMENTO DOS CONTROLES que usam rounded-xl: botões, campos e seletores. */
  --ds-control-radius: 12px;

  /* SOMBRA DOS CARDS que usam shadow-card: os valores 0.04 e 0.03 controlam a opacidade das duas camadas. */
  --ds-shadow-card: 0 1px 3px rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.03);
}