/******************************************************************************/
/* Buttons                                                                    */
/******************************************************************************/

/* Base button — brand background by default */
button {
  margin-top: 5px;
  padding: 6px 12px;
  cursor: pointer;
  border: 1px solid var(--brand);
  border-radius: 4px;
  background: var(--brand);   /* brand background */
  color: #fff;                /* white text */
  font-size: 14px;
  font-weight: 600;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
button:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

/* Primary buttons (global + toolbar) — keep old outline design */
button.primary,
.toolbar button.primary {
  background: #fff;                /* white background */
  color: var(--brand);             /* brand text */
  border: 1.5px solid var(--brand);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
}
button.primary:hover,
.toolbar button.primary:hover {
  background: var(--brand);        /* fill on hover */
  color: #fff;
  border-color: var(--brand-dark);
}

/* Danger button */
button.danger {
  background: #d9534f;
  color: #fff;
  border: 1px solid #d9534f;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
}
button.danger:hover {
  background: #c9302c;
  border-color: #c9302c;
}

/* Insert button (Word UI) */
.insert-btn {
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 12px;
}
.insert-btn:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

/* Dropdown buttons & clear buttons — follow base style */
.dropdown-content button,
button.clear {
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.dropdown-content button:hover,
button.clear:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

/* Outline variant (optional helper) */
.btn-outline-green {
  background: #fff;
  border: 1.5px solid var(--brand);
  color: var(--brand);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-outline-green:hover {
  background: var(--brand-dark);
  border: 2px solid var(--brand-dark);
  color: #fff;
}