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

:root {
  color-scheme: light;

  /* Accent (light teal, locked). */
  --gf-accent: #507E79;
  --gf-accent-hover: #446b67;
  --gf-accent-contrast: #ffffff;
  --gf-accent-subtle: #dcefec;
  --gf-accent-subtle-hover: #c0e4df;
  --gf-accent-border: #b6d8d3;

  /* Surfaces. */
  --gf-bg: #f4f6f6;
  --gf-surface: #ffffff;
  --gf-surface-raised: #ffffff;
  --gf-surface-sunken: #eef1f1;
  --gf-surface-card: #eef1f1;

  /* Text + lines. */
  --gf-text-strong: #262424;
  --gf-text: #3f3d3d;
  --gf-text-muted: #6a6a6a;
  --gf-text-subtle: #8f8f8f;
  --gf-border: #e3e6e6;
  --gf-divider: #eceeee;
  --gf-link: #06697d;

  /* Elevation + focus. */
  --gf-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --gf-shadow-2: 0 2px 10px rgba(0, 0, 0, 0.08);
  --gf-focus-ring-color: rgba(80, 126, 121, 0.35);

  /* Money palette. */
  --money-red: #c23b32;
  --money-orange: #c07807;
  --money-green: #1f8a4c;
  --money-grey: #7a756e;

  /* Status tints: subtle = passive fill, emphasis = active/selected fill. */
  --gf-success-subtle: rgba(80, 180, 80, 0.18);
  --gf-success-emphasis: rgba(80, 180, 80, 0.30);
  --gf-success-border: rgba(80, 180, 80, 0.50);
  --gf-danger-subtle: rgba(220, 80, 80, 0.12);
  --gf-danger-emphasis: rgba(220, 80, 80, 0.20);
  --gf-danger-border: rgba(220, 80, 80, 0.50);
  --gf-info-subtle: rgba(80, 140, 220, 0.14);
  --gf-info-emphasis: rgba(80, 140, 220, 0.24);
  --gf-info-border: rgba(80, 140, 220, 0.50);
  --gf-warning-subtle: rgba(255, 165, 0, 0.12);
  --gf-warning-border: rgba(255, 165, 0, 0.45);

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

body {
  background-color: #507E79;
  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: #D0EEEA;
  }
}

a:hover {
  text-shadow: 0 0 1px color-mix(in srgb, var(--gf-link) 60%, transparent);
}

.header-columns, .content-columns .left-column, footer {
  /* #507E79 is also used as the PWA theme color, set in manifest.json and in a meta tag at the top of the template */
  background-color: #507E79;
  color: white;
}

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

nav li.selected > h3 > a, nav li.selected > a {
  color: /*#bde6dc*/ #D0EEEA;
}

tr.gf-onseen > td, tr.gf-onseen > th,
tr.yellow-highlighted > td, tr.yellow-highlighted > th,
span.yellow-highlighted {
  background-color: #fff7b5 !important;
}

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

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

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

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

.gf-overflow-menu-item:hover:not(.gf-overflow-menu-item-static) {
  background-color: rgba(80, 126, 121, 0.08);
}

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