@layer grist-custom {
  :root {
    --icon-GristLogo: url("custom-logo.svg");
    --grist-theme-logo-bg: #120820;
    --grist-theme-logo-size: 24px 24px;
  }

  :root[data-grist-theme="GristLight"] {
    --grist-theme-primary: #8B5A9F;
    --grist-theme-primary-muted: #6a3d82;
    --grist-theme-primary-dim: #5a2d72;
    --grist-theme-primary-emphasis: #f0e8f5;

    --grist-theme-token-cursor: #8B5A9F;
    --grist-theme-token-cursor-inactive: #c4a8d4;
    --grist-theme-token-selection: #8B5A9F26;
    --grist-theme-token-selection-opaque: #f0e8f5;
    --grist-theme-token-selection-darker-opaque: #e5d8ef;
    --grist-theme-token-selection-darker: #8B5A9F40;
    --grist-theme-token-selection-darkest: #8B5A9F59;

    --grist-theme-secondary: #FF8C42;
    --grist-theme-secondary-muted: #e07a35;

    --grist-theme-control-primary-fg: #ffffff;
    --grist-theme-control-primary-bg: #8B5A9F;
    --grist-theme-control-primary-hover-bg: #6a3d82;
  }

  :root[data-grist-theme="GristDark"] {
    --grist-theme-primary: #a87abf;
    --grist-theme-primary-muted: #8B5A9F;
    --grist-theme-primary-dim: #6a3d82;
    --grist-theme-primary-emphasis: #d4b8e5;

    --grist-theme-token-cursor: #a87abf;
    --grist-theme-token-cursor-inactive: #6a3d82;
    --grist-theme-token-selection: #8B5A9F30;
    --grist-theme-token-selection-opaque: #2a1a35;
    --grist-theme-token-selection-darker-opaque: #351f42;
    --grist-theme-token-selection-darker: #8B5A9F45;
    --grist-theme-token-selection-darkest: #8B5A9F60;

    --grist-theme-secondary: #FF8C42;
    --grist-theme-secondary-muted: #e07a35;

    --grist-theme-control-primary-fg: #ffffff;
    --grist-theme-control-primary-bg: #8B5A9F;
    --grist-theme-control-primary-hover-bg: #6a3d82;
  }
}