:root {
  color-scheme: light;
}
/* Automatic appearance follows the browser; the account choice overrides it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --paper: #171e1a;
    --ink: #e3ebdf;
    --muted: #b4c0b0;
    --green: #426c51;
    --primary: #426c51;
    --green-hover: #507d60;
    --line: #536759;
    --soft: #2e3e32;
    --surface: #202a23;
    --accent: #b0d3a5;
    --danger-text: #ffb4a4;
    --error-surface: #432a25;
    --error-border: #a56657;
    --warning-text: #eed895;
    --warning-surface: #3f3521;
    --ticket-surface: #4d3828;
    --focus: #d8b084;
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --paper: #171e1a;
  --ink: #e3ebdf;
  --muted: #b4c0b0;
  --green: #426c51;
  --primary: #426c51;
  --green-hover: #507d60;
  --line: #536759;
  --soft: #2e3e32;
  --surface: #202a23;
  --accent: #b0d3a5;
  --danger-text: #ffb4a4;
  --error-surface: #432a25;
  --error-border: #a56657;
  --warning-text: #eed895;
  --warning-surface: #3f3521;
  --ticket-surface: #4d3828;
  --focus: #d8b084;
}

::placeholder {
  color: var(--muted);
  opacity: 1;
}

/* Respect the browser's base font size; Large adds a modest 12.5 percent. */
:root[data-text-size='large'] {
  font-size: 112.5%;
}
/* The decorative wordmark stays compact beside the mobile account controls. */
:root[data-text-size='large'] .dashboard-page .brand {
  font-size: 25px;
}
@media (max-width: 640px) {
  :root[data-text-size='large'] .dashboard-page .brand {
    font-size: 21px;
  }
}