/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #6366f1;
  --ifm-color-primary-dark: #4f46e5;
  --ifm-color-primary-darker: #4338ca;
  --ifm-color-primary-darkest: #3730a3;
  --ifm-color-primary-light: #818cf8;
  --ifm-color-primary-lighter: #a5b4fc;
  --ifm-color-primary-lightest: #c7d2fe;
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
  --ifm-footer-background-color: #312e81; /* Indigo 900 */
  --ifm-footer-color: #e0e7ff; /* Indigo 100 */
  --ifm-footer-link-color: #c7d2fe; /* Indigo 200 */
  --ifm-footer-title-color: #e0e7ff; /* Indigo 100 */
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme="dark"] {
  --ifm-color-primary: #818cf8;
  --ifm-color-primary-dark: #6366f1;
  --ifm-color-primary-darker: #4f46e5;
  --ifm-color-primary-darkest: #4338ca;
  --ifm-color-primary-light: #a5b4fc;
  --ifm-color-primary-lighter: #c7d2fe;
  --ifm-color-primary-lightest: #e0e7ff;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
  --ifm-footer-background-color: #1e1b4b; /* Indigo 950 */
  --ifm-footer-color: #e0e7ff; /* Indigo 100 */
  --ifm-footer-link-color: #c7d2fe; /* Indigo 200 */
  --ifm-footer-title-color: #e0e7ff; /* Indigo 100 */
}

/* Custom hero button styling */
.hero .button.button--secondary {
  background-color: white;
  color: var(--ifm-color-primary);
  border: 2px solid white;
  transition: all 0.2s ease-in-out;
}

.hero .button.button--secondary:hover {
  background-color: transparent;
  color: white;
}

/* Dark mode overrides */
[data-theme="dark"] .hero .button.button--secondary {
  background-color: white;
  color: var(--ifm-color-primary);
  border: 2px solid white;
}

[data-theme="dark"] .hero .button.button--secondary:hover {
  background-color: transparent;
  color: white;
  border-color: white;
}
