:root {
  /* Custom */
  --md-outlined-button-container-height: 36px;
  --md-ref-typeface-brand: 'Metropolis';

  --app-accent-color-green-light: #34a853;
  --app-accent-color-on-green-light: #ffffff;

  --app-accent-color-green-dark: #79c08c;
  --app-accent-color-on-green-dark: #012e0d;

  --app-accent-color-orange-light: #fbbc04;
  --app-accent-color-on-orange-light: #ffffff;

  --app-accent-color-orange-dark: #ffd46e;
  --app-accent-color-on-orange-dark: #422e00;

  --app-accent-color-teal-light: #00796b;
  --app-accent-color-on-teal-light: #ffffff;

  --app-accent-color-teal-dark: #75bbb3;
  --app-accent-color-on-teal-dark: #422e00;

  --app-accent-color-indigo-light: #303f9f;
  --app-accent-color-on-indigo-light: #ffffff;

  --app-accent-color-indigo-dark: #838ac2;
  --app-accent-color-on-indigo-dark: #101533;

  /* Custom light*/
  --app-accent-color-green: var(--app-accent-color-green-light);
  --app-accent-color-on-green: var(--app-accent-color-on-green-light);

  --app-accent-color-orange: var(--app-accent-color-orange-light);
  --app-accent-color-on-orange: var(--app-accent-color-on-orange-light);

  --app-accent-color-teal: var(--app-accent-color-teal-light);
  --app-accent-color-on-teal: var(--app-accent-color-on-teal-light);

  --app-accent-color-indigo: var(--app-accent-color-indigo-light);
  --app-accent-color-on-indigo: var(--app-accent-color-on-indigo-light);

  /* Admin change log diff column (light) */
  --change-log-diff-context-bg: var(--md-sys-color-surface-container-high);
  --change-log-diff-context-opacity: 1;
  --change-log-diff-remove-bg: color-mix(in srgb, var(--md-sys-color-error) 22%, var(--md-sys-color-surface));
  --change-log-diff-remove-color: var(--md-sys-color-on-surface);
  --change-log-diff-add-bg: color-mix(in srgb, var(--app-accent-color-green) 22%, var(--md-sys-color-surface));
  --change-log-diff-add-color: var(--md-sys-color-on-surface);
  --change-log-diff-prefix-weight: 600;
}

/* Custom dark*/
[data-theme='dark'] {
  --app-accent-color-green: var(--app-accent-color-green-dark);
  --app-accent-color-on-green: var(--app-accent-color-on-green-dark);

  --app-accent-color-orange: var(--app-accent-color-orange-dark);
  --app-accent-color-on-orange: var(--app-accent-color-on-orange-dark);

  --app-accent-color-teal: var(--app-accent-color-teal-dark);
  --app-accent-color-on-teal: var(--app-accent-color-on-teal-dark);

  --app-accent-color-indigo: var(--app-accent-color-indigo-dark);
  --app-accent-color-on-indigo: var(--app-accent-color-on-indigo-dark);

  /* Admin change log diff column (dark) */
  --change-log-diff-context-bg: var(--md-sys-color-surface-container-low);
  --change-log-diff-context-opacity: 0.85;
  --change-log-diff-remove-bg: var(--md-sys-color-error-container);
  --change-log-diff-remove-color: var(--md-sys-color-on-error-container);
  --change-log-diff-add-bg: var(--app-accent-color-on-green);
  --change-log-diff-add-color: var(--app-accent-color-green);
  --change-log-diff-prefix-weight: 400;
}