:root {
  --paper: #f5f5f0;
  --white: #ffffff;
  --ink: #181818;
  --muted: #6f6f68;
  --line: #deded7;
  --green: #f5ff27;
  --green-dark: #181818;
  --navy: #181818;
  --red: #b91c1c;
  --font-sans: "Google Sans", "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after {
  border-radius: 0 !important;
  font-family: var(--font-sans) !important;
}

body,
button,
input,
dialog,
dialog * {
  font-family: var(--font-sans) !important;
}

body {
  background: var(--paper);
  color: var(--ink);
}

.brand-mark,
.brand-mark.small {
  background: var(--green);
  color: var(--ink);
}

.brand-mark span,
.primary span {
  color: var(--ink);
}

.eyebrow,
.login-foot,
.nav-label,
.top-actions,
.toolbar-mailbox,
.message-top time {
  color: var(--muted);
}

.login-card h1 em {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-decoration-thickness: 0.18em;
  text-underline-offset: 0.12em;
}

.login-aside {
  background: var(--ink);
}

.aside-orbit {
  display: none;
}

.login-aside::before {
  width: 190px;
  height: 190px;
  border-radius: 0;
  background: var(--green);
  box-shadow: none;
  left: 48px;
  top: 48px;
  transform: none;
}

.aside-copy span,
.aside-copy small {
  color: #c3c3ba;
}

.app-shell {
  background: var(--paper);
}

.sidebar {
  background: var(--paper);
  border-color: var(--line);
}

.sidebar-bottom,
.topbar,
.inbox-panel,
.message-row,
.icon-button,
.count-pill,
.login-card input,
.dialog,
.dialog input {
  background: var(--white);
  border-color: var(--line);
}

.wordmark,
.heading-row h1,
.login-card h1,
dialog h2,
.message-top strong,
.subject,
.domain-heading {
  color: var(--ink);
}

.mailbox-button:hover,
.mailbox-button.active,
.message-row:hover,
.icon-button:hover {
  background: var(--paper);
  color: var(--ink);
}

.primary {
  background: var(--ink);
  color: var(--white);
}

.primary:hover {
  background: #303030;
}

.primary span {
  color: var(--green);
}

.login-card input:focus,
.dialog input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px #f5ff2766;
}

.remember input {
  accent-color: var(--ink);
}

.inbox-dot,
.unread-mark {
  background: var(--ink);
}

.sender-avatar,
.avatar,
.empty-icon {
  background: var(--green);
  color: var(--ink);
}

.count-pill span {
  color: var(--ink);
}

.notice {
  color: #35561a;
}

.notice.is-error {
  color: var(--red);
}

.error-box {
  background: #fff0ee;
  color: var(--red);
}

.dialog::backdrop {
  background: #181818aa;
  backdrop-filter: none;
}

@media (max-width: 780px) {
  .login-aside::before {
    display: none;
  }
}