:root {
  --hc-color-primary: #BE3866;
  --hc-color-primary-fill: #BE3866;
  --hc-color-on-primary: #ffffff;
  --hc-color-accent: #312D85;
  --hc-color-fg: #15355D;
  --hc-color-bg: #FFFFFF;
  --hc-color-muted: #5B6B82;
  --hc-color-surface: #F8FAFC;
  --hc-color-border: #E6E9F0;
  --hc-color-primary-text: #BE3866;
  --hc-color-accent-text: #312D85;
  --hc-color-field-border: #8f9095;
  --hc-hero-fg: #ffffff;
  --hc-radius-sm: 8px;
  --hc-radius-md: 12px;
  --hc-radius-lg: 16px;
  --hc-radius-pill: 9999px;
  --hc-font-body: 'system-ui', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hc-font-heading: 'system-ui', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hc-font-mono: 'JetBrains Mono', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hc-density-gap: 1.25rem;
  --hc-density-pad: 1rem;
  --hc-density-h1: 2.25rem;
  --hc-brand-name: "HelpCenter.io Developers";
}

[data-theme="dark"] {
  --hc-color-primary: #F06D9B;
  --hc-color-primary-fill: #F06D9B;
  --hc-color-on-primary: #000000;
  --hc-color-accent: #9A95F2;
  --hc-color-fg: #E8EDF5;
  --hc-color-bg: #0B1220;
  --hc-color-muted: #9AA8BD;
  --hc-color-surface: #121A2B;
  --hc-color-border: #223049;
  --hc-color-primary-text: #F06D9B;
  --hc-color-accent-text: #9A95F2;
  --hc-color-field-border: #5e687a;
  --hc-hero-fg: #000000;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --hc-color-primary: #F06D9B;
  --hc-color-primary-fill: #F06D9B;
  --hc-color-on-primary: #000000;
  --hc-color-accent: #9A95F2;
  --hc-color-fg: #E8EDF5;
  --hc-color-bg: #0B1220;
  --hc-color-muted: #9AA8BD;
  --hc-color-surface: #121A2B;
  --hc-color-border: #223049;
  --hc-color-primary-text: #F06D9B;
  --hc-color-accent-text: #9A95F2;
  --hc-color-field-border: #5e687a;
  --hc-hero-fg: #000000;
  }
}

.hc-logo--dual .hc-logo-img--dark { display: none; }
[data-theme="dark"] .hc-logo--dual .hc-logo-img--light { display: none; }
[data-theme="dark"] .hc-logo--dual .hc-logo-img--dark { display: inline-block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hc-logo--dual .hc-logo-img--light { display: none; }
  :root:not([data-theme="light"]) .hc-logo--dual .hc-logo-img--dark { display: inline-block; }
}