:root {
  --palette-blue-soft: #8FA8D9;
  --palette-blue: #5A86BF;
  --palette-green-deep: #5C8C3A;
  --palette-green: #88BF50;
  --palette-canvas: #F2F2F2;
}

body {
  background: var(--palette-canvas);
}

body > aside {
  background: linear-gradient(165deg, #5C8C3A 0%, #456F2C 100%);
  box-shadow: 10px 0 34px rgba(92, 140, 58, .16);
}

.brand-area {
  border-bottom-color: rgba(255, 255, 255, .18);
}

.brand span,
.logo {
  background: var(--green2);
  color: #203514;
}

.brand-area > small,
.nav-heading {
  color: #DDEBCF;
}

nav a {
  color: #F4F8F0;
}

nav a:hover {
  background: rgba(143, 168, 217, .24);
}

.logout {
  border-color: rgba(255, 255, 255, .42);
  color: #fff;
}

main.public {
  background:
    radial-gradient(circle at 15% 10%, rgba(143, 168, 217, .45), transparent 34%),
    radial-gradient(circle at 88% 84%, rgba(136, 191, 80, .28), transparent 28%),
    var(--palette-canvas);
}

.panel,
.stats article,
.login-card,
.template-card {
  border-color: rgba(90, 134, 191, .22);
  box-shadow: 0 8px 30px rgba(66, 91, 120, .07);
}

button,
.button {
  background: var(--green);
}

button:hover,
.button:hover {
  filter: brightness(.9);
}

.secondary {
  background: rgba(143, 168, 217, .22);
  color: #365E91;
}

input:focus,
select:focus,
textarea:focus {
  outline-color: rgba(143, 168, 217, .55);
  border-color: var(--green);
}

.badge,
.flash.success {
  background: rgba(136, 191, 80, .2);
  color: #426D26;
}

.menu-row.child,
th {
  background: rgba(143, 168, 217, .08);
}

.brand-preview {
  background: linear-gradient(145deg, #5C8C3A, #3F6728);
}