:root {
  --ink: #25332e;
  --muted: #748079;
  --line: #d8ded8;
  --paper: #f7f6f1;
  --cream: #ecefe7;
  --green: #25483d;
  --lime: #dfe7bd;
  --orange: #d98a68;
  --surface: #fcfbf7;
  --surface-raised: #fffefa;
  --soft-sage: #e9eee5;
  --shadow-sm: 0 1px 2px rgba(28, 48, 39, .04);
  --shadow-md: 0 12px 35px rgba(28, 48, 39, .08);
}

::selection {
  background: #cedbb3;
  color: var(--green);
}

body {
  background:
    radial-gradient(circle at 82% 5%, rgba(223, 231, 189, .28), transparent 25rem),
    radial-gradient(circle at 2% 48%, rgba(216, 231, 222, .25), transparent 28rem),
    var(--paper);
}

.grain {
  opacity: .16;
}

.topbar {
  height: 72px;
  background: rgba(247, 246, 241, .84);
  border-bottom-color: rgba(79, 100, 89, .16);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .72);
}

.brand {
  color: var(--green);
}

.brand-mark {
  background: var(--green);
  color: #eef3d0;
  box-shadow: 0 3px 10px rgba(37, 72, 61, .18);
}

.icon-button {
  background: rgba(255, 255, 255, .38);
  border-color: #d2dbd3;
  color: #466258;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.icon-button:hover {
  background: #fffefa;
  border-color: #b8c7bc;
  transform: translateY(-1px);
}

.primary-button {
  background: var(--green);
  box-shadow: 0 4px 12px rgba(37, 72, 61, .18), inset 0 1px rgba(255, 255, 255, .08);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.primary-button:hover {
  background: #315c4e;
  transform: translateY(-1px);
  box-shadow: 0 6px 17px rgba(37, 72, 61, .22), inset 0 1px rgba(255, 255, 255, .08);
}

.primary-button:active {
  transform: translateY(0);
}

.primary-button span {
  color: #e8efc4;
}

.hero {
  padding-top: 76px;
}

.eyebrow {
  color: #6d8176;
}

.hero h1 {
  color: #24352f;
  text-wrap: balance;
}

.hero h1 em {
  color: #688378;
}

.hero-copy {
  color: #68766f;
}

.hero-date {
  color: #809087;
  padding-bottom: 4px;
}

.stats {
  border-color: #d4dcd5;
  border-radius: 14px;
  background: rgba(252, 251, 247, .82);
  box-shadow: var(--shadow-sm), 0 18px 45px rgba(37, 72, 61, .045);
}

.stat-card {
  border-color: #d9dfda;
}

.stat-card.total {
  background:
    radial-gradient(circle at 90% 12%, rgba(224, 232, 190, .13), transparent 9rem),
    #294c40;
}

.stat-card.accent {
  background: #e5ebca;
}

.total .stat-label {
  color: #c4d0c9;
}

.total .stat-sub {
  color: #b7c6be;
}

.stat-sub {
  color: #87918b;
}

.toolbar {
  margin-top: 54px;
}

.search-wrap {
  border-bottom-color: #aab7ae;
}

.search-wrap:focus-within {
  border-bottom-color: var(--green);
  box-shadow: 0 1px 0 var(--green);
}

.search-wrap span {
  color: #61746a;
}

.search-wrap input::placeholder {
  color: #9aa39e;
}

.filter {
  color: #78837d;
  transition: background .16s ease, color .16s ease;
}

.filter:hover {
  background: rgba(226, 233, 224, .72);
  color: var(--green);
}

.filter.active {
  background: #e1e9de;
  color: #31594c;
  box-shadow: inset 0 0 0 1px rgba(65, 99, 82, .05);
}

.toolbar select {
  border-color: #d2dad3;
  background: rgba(255, 255, 255, .44);
  color: #627168;
}

.toolbar select:hover {
  border-color: #b9c7bc;
}

.section-title h2 {
  color: #2b3d36;
}

.application-list {
  gap: 10px;
}

.application-card {
  background: rgba(255, 254, 250, .8);
  border-color: #d8dfd9;
  border-radius: 11px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.application-card:hover {
  background: #fffefa;
  border-color: #c5d1c8;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.company-avatar {
  color: #315348;
  border: 1px solid rgba(56, 87, 72, .07);
  box-shadow: inset 0 1px rgba(255, 255, 255, .4);
}

.app-heading h3 {
  color: #283a34;
}

.app-company {
  color: #607067;
}

.app-meta {
  color: #839087;
}

.status-badge {
  background: #e4ede3;
  color: #38614a;
  border: 1px solid rgba(56, 97, 74, .06);
}

.status-badge[data-status='Interviewing'] {
  background: #f8e4d7;
  color: #9a4d2f;
}

.status-badge[data-status='Offer'] {
  background: #e3ebbe;
  color: #4c641f;
}

.status-badge[data-status='Rejected'],
.status-badge[data-status='Withdrawn'] {
  background: #e9ebe8;
  color: #737c76;
}

.status-badge[data-status='Interested'] {
  background: #e5ebf0;
  color: #45637c;
}

.date-label {
  color: #7e8d84;
}

.date-label.urgent {
  color: #b45f3f;
}

.more-button {
  color: #587166;
  border-radius: 6px;
}

.more-button:hover {
  background: #edf1eb;
}

.empty-state {
  background: rgba(252, 251, 247, .7);
  border-color: #c8d2c9;
}

.empty-icon {
  color: #879f55;
}

dialog {
  background: #fbfaf6;
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 30px 90px rgba(25, 47, 37, .3);
}

dialog::backdrop {
  background: rgba(25, 42, 34, .48);
}

.field {
  color: #526159;
}

.field input,
.field select,
.field textarea {
  background: #fffefa;
  border-color: #cfd8d0;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: #b8c6ba;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: #668777;
  outline: none;
  box-shadow: 0 0 0 3px rgba(89, 128, 108, .12);
  background: white;
}

.form-footer {
  border-color: #dde2dd;
}

.secondary-button:hover {
  background: #e9eee8;
}

.delete-button {
  color: #ae594b;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}