@import url("custom-tooltip.css");


:root {

  --slightly-negative-color: #df2d50;
  --positive-color: rgb(0, 158, 115);
  --slightly-positive-color: #98bd29; /* NIC.br color */
  --negative-color: #E69F00;
  --warning-color: #ffaa0c;
  --alert-color: #ffe30c;
  --blue: #89c5d7;
  --purple: #ccbbd1;
  --link-blue: #0072B2;

  --card-color: hsl(0, 0%, 98%);
  --background: #fff;
  --border-color: hsl(0, 0%, 92%);
  --border-color-strong: #b3b3b3;
  --overlay-bg: rgba(0, 0, 0, 0.4);

  --text-primary: #111827; 
  --text-secondary: #6b7280;

  --component-spacing: 12px;



  --y-axis-font-size: 1rem;
  --x-axis-font-size: 1.5rem;
  --legend-font-size: 1.2rem;
  --title-font-size: 2rem;

  --section-title: 3.2rem;
  --description-font-size: 1.5rem;
  --normal-text-font-size: 1.3rem;
}

.status-gain {
  color: var(--positive-color);
}

.status-loss {
  color: var(--negative-color);
}

.status-neutral {
  color: var(--border-color-strong)
}

.row-flex {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.end-align {
  justify-content: end;
}

.space-between {
  justify-content: space-between;
}


.icon,
.info-icon {
  width: 16px;
  height: 16px;
}

.info-icon {
  content: url("../images/icons/info.svg");
}

.icon-button {
  background-color: var(--card-color);
  border: 1px solid var(--blue);
  border-radius: 6px;
  padding: 2px 12px;
  width: fit-content;
  height: 24px;
  cursor: pointer;
}

.icon-button:hover {
  background-color: var(--blue);
}




@media (max-width: 768px) {
  :root {
    --section-title: 2rem; 
    --description-font-size: 1.2rem;
    --x-axis-font-size: 0.9rem;
    --y-axis-font-size: 0.9rem; 
    --legend-font-size: 0.9rem;
    --normal-text-font-size: 1.8rem;
  }
}