@layer grist-custom {
  :root {
    /* TA-DONE logo */
    --icon-GristLogo: url("/ta-done-icon.svg");
    --grist-theme-logo-bg: #6858d0;
    --grist-theme-logo-size: 20px 20px;
  }

  :root[data-grist-theme="GristLight"] {
    /* TA-DONE brand purple as the primary accent color */
    --grist-theme-primary: #6858d0;
    --grist-theme-primary-muted: #4f3fb0;
    --grist-theme-primary-dim: #3d2f8c;
    --grist-theme-primary-emphasis: #e4e0fa;

    --grist-theme-token-cursor: var(--grist-theme-primary);
    --grist-theme-token-cursor-inactive: #c4b8f0;
    --grist-theme-token-selection: #6858d026;
    --grist-theme-token-selection-opaque: #ede9fb;
    --grist-theme-token-selection-darker-opaque: #e4dff8;
    --grist-theme-token-selection-darker: #6858d040;
    --grist-theme-token-selection-darkest: #6858d059;
  }

  :root[data-grist-theme="GristDark"] {
    --grist-theme-primary: #8670e8;
    --grist-theme-primary-muted: #6858d0;
    --grist-theme-primary-dim: #4f3fb0;
    --grist-theme-primary-emphasis: #2a2151;

    --grist-theme-token-cursor: var(--grist-theme-primary);
  }
}

/* Logo on the home page welcome heading (outside the layer so it always wins) */
.test-welcome-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.test-welcome-title::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 32px;
  background-image: url("/ta-done-icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}