html[data-theme='light'],
:root {
  --primary: oklch(65.6% 0.241 354.308);
  --secondary: color-mix(in oklab, var(--primary) 75%, transparent);
  --accent: #fff;
  --primary-fg: #fff;

  --body-fg: oklch(37.2% 0.044 257.287);
  --body-bg: #fff;
  --body-quiet-color: oklch(55.4% 0.046 257.417);
  --body-loud-color: oklch(20.8% 0.042 265.755);

  --header-color: var(--accent);
  --header-branding-color: var(--accent);
  --header-bg: var(--secondary);
  --header-link-color: var(--accent);

  --breadcrumbs-fg: var(--body-quiet-color);
  --breadcrumbs-link-fg: var(--primary);
  --breadcrumbs-bg: var(--darkened-bg);

  --link-fg: var(--primary);
  --link-hover-color: var(--secondary);
  --link-selected-fg: var(--secondary);

  --hairline-color: #e8e8e8;
  --border-color: #ccc;

  --error-fg: #ba2121;

  --message-success-bg: #dfd;
  --message-warning-bg: #ffc;
  --message-error-bg: #ffefef;

  --darkened-bg: oklch(96.7% 0.001 286.375);
  --selected-bg: oklch(98.5% 0 0);
  --selected-row: oklch(92% 0.004 286.32);

  --button-fg: #fff;
  --button-bg: var(--primary);
  --button-hover-bg: var(--secondary);
  --default-button-bg: var(--primary);
  --default-button-hover-bg: var(--secondary);
  --close-button-bg: #747474;
  --close-button-hover-bg: #333;
  --delete-button-bg: #ba2121;
  --delete-button-hover-bg: #a41515;

  --object-tools-fg: var(--button-fg);
  --object-tools-bg: var(--close-button-bg);
  --object-tools-hover-bg: var(--close-button-hover-bg);
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: oklch(0.718 0.202 349.761);
    --primary-fg: oklch(0.205 0 0);

    --body-fg: oklch(0.922 0 0);
    --body-bg: oklch(0.205 0 0);
    --body-quiet-color: oklch(0.708 0 0);
    --body-loud-color: #fff;

    --header-color: var(--accent);
    --header-branding-color: var(--accent);
    --header-bg: var(--secondary);
    --header-link-color: var(--accent);

    --breadcrumbs-fg: var(--body-quiet-color);
    --breadcrumbs-link-fg: var(--primary);
    --breadcrumbs-bg: var(--darkened-bg);

    --link-fg: var(--primary);
    --link-hover-color: var(--secondary);
    --link-selected-fg: var(--secondary);

    --hairline-color: #272727;
    --border-color: #353535;

    --error-fg: #e35f5f;
    --message-success-bg: #006b1b;
    --message-warning-bg: #583305;
    --message-error-bg: #570808;

    --darkened-bg: oklch(27.4% 0.006 286.033);
    --selected-bg: oklch(27.4% 0.006 286.033);
    --selected-row: oklch(37% 0.013 285.805);

    --button-fg: var(--primary-fg);
    --button-bg: var(--primary);
    --button-hover-bg: var(--secondary);
    --default-button-bg: var(--primary);
    --default-button-hover-bg: var(--secondary);
    --close-button-bg: #333333;
    --close-button-hover-bg: #666666;
  }
}

html[data-theme='dark'] {
  --primary: oklch(0.718 0.202 349.761);
  --primary-fg: oklch(0.205 0 0);

  --body-fg: oklch(0.922 0 0);
  --body-bg: oklch(0.205 0 0);
  --body-quiet-color: oklch(0.708 0 0);
  --body-loud-color: #fff;

  --header-color: var(--accent);
  --header-branding-color: var(--accent);
  --header-bg: var(--secondary);
  --header-link-color: var(--accent);

  --breadcrumbs-fg: var(--body-quiet-color);
  --breadcrumbs-link-fg: var(--primary);
  --breadcrumbs-bg: var(--darkened-bg);

  --link-fg: var(--primary);
  --link-hover-color: var(--secondary);
  --link-selected-fg: var(--secondary);

  --hairline-color: #272727;
  --border-color: #353535;

  --error-fg: #e35f5f;
  --message-success-bg: #006b1b;
  --message-warning-bg: #583305;
  --message-error-bg: #570808;

  --darkened-bg: oklch(27.4% 0.006 286.033);
  --selected-bg: oklch(27.4% 0.006 286.033);
  --selected-row: oklch(37% 0.013 285.805);

  --button-fg: var(--primary-fg);
  --button-bg: var(--primary);
  --button-hover-bg: var(--secondary);
  --default-button-bg: var(--primary);
  --default-button-hover-bg: var(--secondary);
  --close-button-bg: #333333;
  --close-button-hover-bg: #666666;
}

/* Removes the grey artifact from django theme-toggle */
.theme-toggle svg.theme-icon-when-auto,
.theme-toggle svg.theme-icon-when-dark,
.theme-toggle svg.theme-icon-when-light {
  color: transparent;
}