:root {
  /* Fonts */
  --font-family: "Fira Sans", sans-serif;
  --font-family-monospaced: "Fira Mono", monospace;
  --font-family-editor: "Source Code Pro", monospace;

  color-scheme: light dark;

  /* Scale of z-index values */
  --z-index-floating-ui: 1;
  --z-index-autocomplete: 2;
  --z-index-overlay: 3;
  --z-index-keyboard-overlays: 4;

  /* Named colors */
  --error: hsl(0deg 100% 30%);
  --warning: hsl(52deg 84% 56%);
  --red: var(--error);
  --yellow: var(--warning);
  --green: hsl(151deg 100% 25%);
  --gray: hsl(0deg 0% 67%);

  /* Base colors (backgrounds) */
  --background: light-dark(hsl(0deg 0% 100%), hsl(0deg 0% 15%));
  --background-darker: light-dark(hsl(0deg 0% 95%), hsl(0deg 0% 20%));
  --background-darkest: light-dark(hsl(0deg 0% 90%), hsl(0deg 0% 25%));
  --background-button: light-dark(hsl(0deg 0% 80%), hsl(0deg 0% 35%));

  /* Base colors (borders) */
  --border-lighter: light-dark(hsl(0deg 0% 90%), hsl(0deg 0% 25%));
  --border: light-dark(hsl(0deg 0% 85%), hsl(0deg 0% 30%));
  --border-darker: light-dark(hsl(0deg 0% 80%), hsl(0deg 0% 35%));

  /* Base colors (foreground) */
  --text-color: light-dark(hsl(0deg 0% 25%), hsl(0deg 0% 80%));
  --text-color-lighter: light-dark(hsl(0deg 0% 30%), hsl(0deg 0% 75%));
  --text-color-lightest: light-dark(hsl(0deg 0% 40%), hsl(0deg 0% 65%));
  --link-color: light-dark(hsl(203deg 100% 32%), hsl(203deg 100% 68%));
  --link-hover-color: var(--text-color-lighter);

  /* Base elements */
  --heading-color: var(--text-color);
  --code-background: var(--background-darker);

  /* Box shadows */
  --box-shadow-button: 0 0 5px hsl(0deg 0% 50% / 50%);
  --box-shadow-dropdown: 3px 3px 3px
    light-dark(hsl(0deg 0% 50% / 50%), hsl(0deg 0% 25% / 50%));
  --box-shadow-kbd: inset 0 -1px 0 var(--border-darker);
  --box-shadow-overlay: 0 0 20px var(--overlay-wrapper-background);

  /* Buttons */
  --button-color: hsl(0deg 0% 100%);
  --button-background: hsl(203deg 100% 32%);
  --button-muted-color: var(--text-color);
  --button-muted-background: var(--background-button);

  /* Sidebar */
  --sidebar-color: var(--text-color-lighter);
  --sidebar-hover-color: var(--link-color);
  --sidebar-background: var(--background-darker);
  --sidebar-border: var(--border-lighter);

  /* Details */
  --summary-background: var(--background-darker);
  --summary-background-darker: var(--background-darkest);

  /* Header */
  --header-color: hsl(0deg 0% 100%);
  --header-background: light-dark(hsl(203deg 100% 32%), hsl(203deg 100% 25%));
  --header-placeholder-color: hsl(203deg 47% 66%);
  --header-placeholder-background: hsl(203deg 56% 45%);

  /* Tables */
  --table-header-text: var(--text-color-lightest);
  --table-header-background: var(--background-darkest);
  --table-border: var(--border-lighter);
  --table-background-even: var(--background-darker);
  --treetable-expander: light-dark(hsl(210deg 30% 45%), hsl(210deg 30% 55%));

  /* Amount differences. */
  --diff-negative: light-dark(hsl(0deg 48% 40%), hsl(0deg 48% 60%));
  --diff-positive: light-dark(hsl(125deg 48% 40%), hsl(125deg 48% 60%));

  /* Editor elements */
  --editor-activeline: light-dark(
    hsl(200deg 100% 90% / 30%),
    hsl(200deg 100% 30% / 30%)
  );
  --editor-selectionmatch: light-dark(
    hsl(105deg 100% 70% / 50%),
    hsl(105deg 100% 30% / 50%)
  );

  /* Beancount editor contents */
  --editor-account: var(--link-color);
  --editor-class: light-dark(hsl(34deg 50% 30%), hsl(34deg 50% 70%));
  --editor-comment: hsl(60deg 8% 50%);
  --editor-currencies: light-dark(hsl(293deg 100% 30%), hsl(293deg 100% 60%));
  --editor-date: light-dark(hsl(180deg 100% 20%), hsl(180deg 100% 50%));
  --editor-directive: var(--text-color);
  --editor-invalid-background: hsl(0deg 100% 80% / 50%);
  --editor-invalid: var(--text-color);
  --editor-label-name: light-dark(hsl(248deg 80% 33%), hsl(248deg 80% 67%));
  --editor-number: light-dark(hsl(156deg 71% 20%), hsl(156deg 71% 40%));
  --editor-string: light-dark(hsl(0deg 82% 33%), hsl(0deg 82% 67%));

  /* Query editor contents */
  --bql-keywords: var(--editor-currencies);
  --bql-values: light-dark(hsl(158deg 100% 30%), hsl(158deg 100% 60%));
  --bql-string: var(--editor-string);
  --bql-errors: var(--text-color);

  /* Misc */
  --notification-color: hsl(0deg 0% 100%);
  --chart-axis: hsl(0deg 0% 60%);
  --chart-line-at-zero: hsl(0deg 0% 40%);
  --autocomplete-match: hsl(39deg 100% 70% / 50%);
  --mobile-button-text: light-dark(hsl(0deg 0% 0%), hsl(0deg 0% 79%));
  --placeholder-color: light-dark(hsl(0deg 0% 47%), hsl(0deg 0% 85%));
  --placeholder-background: light-dark(hsl(0deg 0% 100%), hsl(0deg 0% 30%));
  --dragover-background: hsl(203deg 100% 32% / 50%);
  --overlay-wrapper-background: hsl(0deg 0% 50% / 50%);

  /* Help pages */
  --help-sidebar-background: var(--background-darker);
  --help-sidebar-border: var(--border-lighter);
}

.journal .balance {
  --entry-background: light-dark(hsl(120deg 100% 90%), hsl(120deg 50% 15%));
}

.journal .close {
  --entry-background: light-dark(hsl(0deg 0% 70%), hsl(0deg 0% 15%));
}

.journal .custom {
  --entry-background: light-dark(hsl(51deg 100% 80%), hsl(52deg 100% 15%));
}

.journal .document {
  --entry-background: light-dark(hsl(300deg 100% 80%), hsl(300deg 45% 25%));
}

.journal .note {
  --entry-background: light-dark(hsl(213deg 100% 80%), hsl(212deg 43% 25%));
}

.journal .open {
  --entry-background: light-dark(hsl(0deg 0% 92%), hsl(0deg 0% 20%));
}

.journal .other {
  --entry-background: light-dark(hsl(180deg 100% 70%), hsl(180deg 100% 25%));
}

.journal .pad {
  --entry-background: light-dark(hsl(180deg 100% 85%), hsl(180deg 100% 15%));
}

.journal .pending {
  --entry-background: light-dark(hsl(343deg 100% 80%), hsl(343deg 60% 20%));
}

.journal .query {
  --entry-background: light-dark(hsl(213deg 100% 80%), hsl(213deg 100% 25%));
}

.journal .budget {
  --entry-background: light-dark(hsl(35deg 100% 80%), hsl(35deg 100% 20%));
}

.journal {
  --journal-postings: light-dark(hsl(0deg 0% 92%), hsl(0deg 0% 10%));
  --journal-metadata: hsl(210deg 44% 67%);
  --journal-tag: hsl(210deg 61% 64%);
  --journal-link: hsl(203deg 39% 85%);
  --journal-posting-indicator: hsl(203deg 24% 80%);
  --journal-metadata-indicator: hsl(203deg 24% 40%);
  --journal-hover-highlight: light-dark(
    hsl(0deg 0% 90% / 60%),
    hsl(0deg 0% 20% / 60%)
  );
}
