@import url("/assets/tokens-3526b595.css");
@import url("/assets/layout-81d01ee5.css");
@import url("/assets/modal-ad71c603.css");
@import url("/assets/note-910c25d5.css");
@import url("/assets/pagination-436ed604.css");
@import url("/assets/table-6033e140.css");

a {
  color: var(--text-muted);
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }

  &.vendor {
    color: var(--vendor);
  }
}

body {
  margin: 0;
  color: var(--text);
  font-family: "helvetica neue", arial, helvetica, san-serif;
  background: var(--bg);
}

h1 {
  font-size: 2em;
  margin: 0 0 1em 0;
}

h2 {
  font-size: 1.75em;
  margin: 0 0 0.5em 0;
}

input[type=text],
input[type=password] {
  background: var(--field);
  border: 2px solid var(--field-border);
  color: var(--text-strong);
  font-size: 1.5em;
  margin: 0.25em 0;
  width: 15em;
}

input[type=text].long {
  width: 30em;
}

/* The "$" is a real element (money_field helper) because a background image
   cannot take a token color. */
input.money {
  padding-left: 1.1em;
  width: 9em;
}

.amount-field {
  display: inline-block;
  position: relative;
}

.amount-field .currency {
  color: var(--text-dim);
  font-size: 1.5em;
  left: 0.3em;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

textarea {
  background: var(--field);
  border: 2px solid var(--field-border);
  color: var(--text-strong);
  width: 30em;
  height: 25em;
}

::placeholder {
  color: var(--text-faint);
}

/* Unstyled, these fall back to browser chrome that no token can reach.
   color-scheme on :root covers the rest: scrollbars, caret, checkboxes. */
button,
input[type=submit] {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text-strong);
  padding: 0.2em 0.6em;
}

select {
  background: var(--field);
  border: 1px solid var(--field-border);
  color: var(--text-strong);
}

.clear {
  clear: both;
}

.create a {
  color: var(--success);
}

/* button_to renders a form+button, so the old `.delete a` matched nothing. */
.delete button {
  color: var(--danger);
}

.missing {
  color: var(--danger);
}

summary {
  cursor: pointer;
}

.negative, .credit {
  color: var(--money-out);
}

.positive, .debit {
  color: var(--money-in);
}