/* Color variables */
:root {
  /* Theme overrides - purple palette */
  --color-primary: #6639a6;
  --color-primary-hover: #5a2d91;
  --color-primary-dark: #a67ed9;
  --color-primary-hover-dark: #8a5fc7;
  --color-border: #6639a6;
  --color-border-dark: #a67ed9;
  --color-background-draft-dark: #6639a6;

  /* Custom variables */
  --color-bg-light: #fff;
  --color-bg-dark: #202124;
  --color-text-inverse: #fff;
  --color-text-inverse-dark: #fff;
  --theme-transition: 0.15s ease;
  --dark-bg-translucent: rgba(166, 126, 217, 0.1);
  --dark-border-translucent: rgba(166, 126, 217, 0.4);
  --dark-hover-bg: rgba(166, 126, 217, 0.2);
  --dark-draft-bg: rgba(166, 126, 217, 0.18);
  --dark-draft-border: rgba(166, 126, 217, 0.5);
  --backdrop-color: rgba(0, 0, 0, 0.5);
  --code-selection-bg-light: rgba(102, 57, 166, 0.2);
  --code-selection-color-light: #1f2328;
  --code-selection-bg-dark: rgba(166, 126, 217, 0.35);
  --code-selection-color-dark: #f7f7f7;
  /* Pagefind dark mode */
  --pagefind-text-dark: #e5e5e5;
  --pagefind-bg-dark: #2a2a2a;
  --pagefind-border-dark: #404040;
  --pagefind-tag-dark: #333;
}

/* Smooth theme transitions */
html,
body,
.homepage-body,
.blog-body,
.blog-wrapper,
.content,
header,
nav,
a,
.tool-pill,
.theme-toggle {
  transition:
    background-color var(--theme-transition),
    color var(--theme-transition),
    border-color var(--theme-transition);
}