/* vim: set tabstop=2 shiftwidth=2 expandtab smarttab: */

:root {
  color-scheme: dark;

  /* Accent (brighter teal for dark surfaces; header keeps #406561, see body). */
  --gf-accent: #4F9187;
  --gf-accent-hover: #5aa298;
  --gf-accent-contrast: #ffffff;
  --gf-accent-subtle: rgba(90, 167, 155, 0.16);
  --gf-accent-subtle-hover: rgba(90, 167, 155, 0.30);
  --gf-accent-border: rgba(90, 167, 155, 0.40);

  /* Surfaces (neutral near-black). */
  --gf-bg: #141414;
  --gf-surface: #1b1d1e;
  --gf-surface-raised: #242627;
  --gf-surface-sunken: #101010;
  --gf-surface-card: #242627;

  /* Text + lines. */
  --gf-text-strong: #ece8e2;
  --gf-text: #d8d3cb;
  --gf-text-muted: #9a938a;
  --gf-text-subtle: #726b63;
  --gf-border: #34383a;
  --gf-divider: #2a2d2e;
  --gf-link: #61caff;

  /* Elevation + focus. */
  --gf-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --gf-shadow-2: 0 4px 16px rgba(0, 0, 0, 0.5);
  --gf-focus-ring-color: rgba(90, 167, 155, 0.45);

  /* Money palette. */
  --money-red: #ff6b6b;
  --money-orange: #ffb74d;
  --money-green: #56d98a;
  --money-grey: #988f81;

  /* Status tints: subtle = passive fill, emphasis = active/selected fill. */
  --gf-success-subtle: rgba(86, 217, 138, 0.14);
  --gf-success-emphasis: rgba(86, 217, 138, 0.24);
  --gf-success-border: rgba(86, 217, 138, 0.45);
  --gf-danger-subtle: rgba(255, 107, 107, 0.14);
  --gf-danger-emphasis: rgba(255, 107, 107, 0.22);
  --gf-danger-border: rgba(255, 107, 107, 0.45);
  --gf-info-subtle: rgba(97, 202, 255, 0.16);
  --gf-info-emphasis: rgba(97, 202, 255, 0.26);
  --gf-info-border: rgba(97, 202, 255, 0.45);
  --gf-warning-subtle: rgba(255, 183, 77, 0.14);
  --gf-warning-border: rgba(255, 183, 77, 0.45);

  /* Scrim behind modals, menus, and the mobile nav. */
  --gf-overlay: rgba(0, 0, 0, 0.6);
}

body {
  background-color: #406561;
  color: var(--gf-text);
  -webkit-tap-highlight-color: color-mix(in srgb, var(--gf-text) 5%, transparent);
}

/* More distinctive body background color when we might possibly see it on the
   left/right of the main content (otherwise, leave it as the theme color in
   case it peeks out at the top or bottom, e.g. behind christmas lights) */
@media screen and (min-width: 700px) {
  body {
    background-color: #18423d;
  }
}

a:hover {
  text-shadow: 0 0 1px rgba(255, 255, 255, .6);
}

.header-columns, .content-columns .left-column, footer {
  /* #406561 is also set as the theme color in a meta tag at the top of the template when in dark mode */
  background-color: #406561;
  color: #e8e6e3;
}

.content-columns .left-column hr {
  border: 0;
  border-top: 1px solid #e8e6e3;
}

nav li.selected > h3 > a, nav li.selected > a {
  color: #b9e6e0;
}

tr.gf-onseen > td, tr.gf-onseen > th,
tr.yellow-highlighted > td, tr.yellow-highlighted > th,
span.yellow-highlighted {
  /* I'm still not really satisfied with this color...
     The recommendation from dark reader is #484000 which also isn't great... */
  background-color: #554c00 !important;
}

.subtag {
  background-color: rgba(255,255,255,0.2);
  color: var(--gf-text-strong);
}

.edit-history-entry {
  border-left: 3px solid var(--gf-border);
  background: rgba(255,255,255,0.02);
}

.gf-calc-keypad button:active {
  background-color: rgba(255, 255, 255, 0.1);
}

.gf-calc-keypad .gf-calc-digit {
  background-color: rgba(255, 255, 255, 0.06);
}

.gf-overflow-menu-item:hover:not(.gf-overflow-menu-item-static) {
  background-color: rgba(255, 255, 255, 0.06);
}

.if-light-mode {
  display: none;
}