@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&family=Inconsolata:wght@400;500&family=Open+Sans:ital,wght@0,400;0,600;1,400&family=Orbitron:wght@500;600;700&family=Rajdhani:wght@400;500;600;700&display=swap");

/* ----- Light (:root.light / light-theme mixin) ----- */
[data-md-color-scheme="default"] {
  --haiku-primary: #0a605c;
  --haiku-primary-dark: #004a41;
  --haiku-primary-light: #e6ffff;
  --haiku-secondary: #0da09c;
  --haiku-tertiary: #4267a9;
  --haiku-bg: #f3f3f3;
  --haiku-header: #eeeeee;
  --haiku-sidebar: #dddddd;
  --haiku-card: #ffffff;
  --haiku-text: #0b0b0b;
  --haiku-text-dimmed: #646474;
  --haiku-code-bg: #fafafc;
  --haiku-code-fg: #0b0b0b;
  --haiku-footer-bg: #0a605c;
  --haiku-selection-bg: #fcba28;
  --haiku-selection-fg: #0f0d0e;

  --md-primary-fg-color: var(--haiku-primary);
  --md-primary-fg-color--light: var(--haiku-secondary);
  --md-primary-fg-color--dark: var(--haiku-primary-dark);
  --md-accent-fg-color: var(--haiku-secondary);
  --md-accent-fg-color--transparent: #0da09c22;
  --md-typeset-a-color: var(--haiku-primary);
  --md-default-fg-color: #0b0b0bde;
  --md-default-fg-color--light: #0b0b0b8f;
  --md-default-fg-color--lighter: #0b0b0b52;
  --md-default-fg-color--lightest: #0b0b0b1f;
  --md-default-bg-color: var(--haiku-bg);
  --md-code-fg-color: var(--haiku-code-fg);
  --md-code-bg-color: var(--haiku-code-bg);
  --md-footer-fg-color: #ffffffb8;
  --md-footer-fg-color--light: #ffffff73;
  --md-footer-bg-color: var(--haiku-footer-bg);
}

/* ----- Dark (:root.dark / dark-theme mixin) ----- */
[data-md-color-scheme="slate"] {
  --haiku-primary: #00b7ac;
  --haiku-primary-dark: #0a605c;
  --haiku-primary-light: #e6ffff;
  --haiku-secondary: #d0f83e;
  --haiku-tertiary: #6287c9;
  --haiku-bg: #010522;
  --haiku-header: #16172c;
  --haiku-sidebar: #000017;
  --haiku-card: #0f132e;
  --haiku-text: #f4f5f7;
  --haiku-text-dimmed: #909090;
  --haiku-code-bg: #23272f;
  --haiku-code-fg: #f4f5f7;
  --haiku-footer-bg: #0a605c;
  --haiku-selection-bg: #fcba28;
  --haiku-selection-fg: #0f0d0e;

  --md-primary-fg-color: var(--haiku-primary);
  --md-primary-fg-color--light: #33c4bb;
  --md-primary-fg-color--dark: var(--haiku-primary-dark);
  --md-accent-fg-color: var(--haiku-secondary);
  --md-accent-fg-color--transparent: #d0f83e33;
  --md-typeset-a-color: var(--haiku-primary);
  --md-default-fg-color: #f4f5f7e6;
  --md-default-fg-color--light: #f4f5f79e;
  --md-default-fg-color--lighter: #f4f5f761;
  --md-default-fg-color--lightest: #f4f5f71f;
  --md-default-bg-color: var(--haiku-bg);
  --md-code-fg-color: var(--haiku-code-fg);
  --md-code-bg-color: var(--haiku-code-bg);
  --md-footer-fg-color: #ffffffb8;
  --md-footer-fg-color--light: #ffffff66;
  --md-footer-bg-color: var(--haiku-footer-bg);
}

/* App-style header (neutral bar), not solid primary */
[data-md-color-scheme="default"] .md-header {
  background-color: var(--haiku-header);
  color: var(--haiku-text);
  box-shadow: 0 0 0.05rem #0000000d, 0 0.2rem 0.4rem #6a6d8526;
}

[data-md-color-scheme="slate"] .md-header {
  background-color: var(--haiku-header);
  color: var(--haiku-text);
  box-shadow: 0 0 0.2rem #00000040, 0 0.2rem 0.4rem #0003;
}

[data-md-color-scheme="default"] .md-header__button,
[data-md-color-scheme="default"] .md-header__topic,
[data-md-color-scheme="default"] .md-search__input,
[data-md-color-scheme="default"] .md-search__icon,
[data-md-color-scheme="default"] .md-source__fact,
[data-md-color-scheme="default"] .md-source__repository {
  color: var(--haiku-text);
}

[data-md-color-scheme="slate"] .md-header__button,
[data-md-color-scheme="slate"] .md-header__topic,
[data-md-color-scheme="slate"] .md-search__input,
[data-md-color-scheme="slate"] .md-search__icon,
[data-md-color-scheme="slate"] .md-source__fact,
[data-md-color-scheme="slate"] .md-source__repository {
  color: var(--haiku-text);
}

[data-md-color-scheme="default"] .md-search__input::placeholder {
  color: var(--haiku-text-dimmed);
}

[data-md-color-scheme="slate"] .md-search__input::placeholder {
  color: var(--haiku-text-dimmed);
}

/* Sidebar — background-sidebar */
[data-md-color-scheme="default"] .md-sidebar--primary {
  background-color: var(--haiku-sidebar);
}

[data-md-color-scheme="slate"] .md-sidebar--primary {
  background-color: var(--haiku-sidebar);
}

[data-md-color-scheme="default"] .md-nav--primary .md-nav__title {
  color: var(--haiku-text);
}

[data-md-color-scheme="slate"] .md-nav--primary .md-nav__title {
  color: var(--haiku-text);
}

[data-md-color-scheme="default"] .md-nav__link {
  color: var(--haiku-text-dimmed);
}

[data-md-color-scheme="slate"] .md-nav__link {
  color: var(--haiku-text-dimmed);
}

[data-md-color-scheme="default"] .md-nav__link--active,
[data-md-color-scheme="default"] .md-nav__link:hover {
  color: var(--haiku-primary);
}

[data-md-color-scheme="slate"] .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav__link:hover {
  color: var(--haiku-primary);
}

/* Content surface — card-like */
[data-md-color-scheme="default"] .md-content {
  background-color: var(--haiku-card);
}

[data-md-color-scheme="slate"] .md-content {
  background-color: var(--haiku-card);
}

/* Typography — mui-theme-reset: body Cairo; heading1 Orbitron; heading2 Cairo; heading3 Rajdhani */
.md-typeset {
  font-family: "Cairo", "Open Sans", sans-serif;
}

.md-typeset h1 {
  font-family: "Orbitron", sans-serif;
  font-weight: 600;
}

.md-typeset h2 {
  font-family: "Cairo", "Courier New", monospace;
  font-weight: 600;
}

.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6,
.md-typeset .admonition-title {
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
}

.md-header__topic,
.md-nav__title,
.md-ellipsis {
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
}

.md-tabs__link {
  font-family: "Orbitron", sans-serif;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.md-typeset code,
.md-typeset pre > code,
.md-typeset kbd {
  font-family: "Inconsolata", ui-monospace, monospace;
}

.md-search__input,
.md-header__option,
.md-version {
  font-family: "Cairo", sans-serif;
}

/* Text selection — text-selection-bg from SCSS */
.md-typeset ::selection {
  background-color: var(--haiku-selection-bg);
  color: var(--haiku-selection-fg);
}

.md-header ::selection,
.md-sidebar ::selection,
.md-search__form ::selection {
  background-color: var(--haiku-selection-bg);
  color: var(--haiku-selection-fg);
}

/* Logo */
.md-header__button.md-logo img {
  height: 1.75rem;
  width: auto;
  object-fit: contain;
}