/* Knotis hashtag theme. Shipped with the extension; synced to assets/knotis-hashtag.css on build. */

:root,
[data-md-color-scheme="default"] {
  --hashtag1: #b45309;
  --hashtag2: #067647;
  --hashtag3: #175cd3;
  --hashtag4: #7a5af8;
  --hashtag5: #d4448b;
  --knotis-concept-color: #0197a7;
  --knotis-concept-hover-bg: color-mix(in srgb, #0197a7 12%, transparent);
  --knotis-concept-flash-bg: color-mix(in srgb, #0197a7 28%, transparent);
  --knotis-concept-text: var(--knotis-concept-color);
  --knotis-concept-hover-background: var(--knotis-concept-hover-bg);
  --knotis-concept-flash-background: var(--knotis-concept-flash-bg);
  --knotis-concept-flash-outline: var(--knotis-concept-color);
  --knotis-hashtag-text: var(--hashtag3);
  --knotis-hashtag-background: color-mix(in srgb, var(--hashtag3) 14%, transparent);
  --knotis-hashtag-hover-background: color-mix(in srgb, var(--hashtag3) 22%, transparent);
  --knotis-hashtag-mark-background: color-mix(in srgb, var(--hashtag3) 28%, transparent);
  --knotis-hashtag-mark-text: var(--hashtag3);
  --knotis-block-highlight-background: color-mix(in srgb, var(--hashtag3) 42%, transparent);
  --knotis-block-highlight-mid-background: color-mix(in srgb, var(--hashtag3) 26%, transparent);
  --knotis-block-highlight-outline: var(--hashtag3);
  --knotis-hyperlink-color: #0197a7;
  --knotis-accent-color: var(--knotis-concept-color);
  --knotis-accent-fill-color: var(--knotis-accent-color);
  --knotis-accent-on-color: #fff;
  --knotis-accent-bg-subtle: color-mix(in srgb, var(--knotis-accent-color) 12%, var(--md-default-bg-color));
  --knotis-accent-border: color-mix(in srgb, var(--knotis-accent-color) 32%, transparent);
}

[data-md-color-scheme="slate"] {
  --hashtag1: #ffbf7d;
  --hashtag2: #79d7a7;
  --hashtag3: #86bbff;
  --hashtag4: #b4a7ff;
  --hashtag5: #ff8ec0;
  --knotis-concept-color: #fda4af;
  --knotis-concept-hover-bg: color-mix(in srgb, #fda4af 18%, transparent);
  --knotis-concept-flash-bg: color-mix(in srgb, #fda4af 28%, transparent);
  --knotis-concept-text: var(--knotis-concept-color);
  --knotis-concept-hover-background: var(--knotis-concept-hover-bg);
  --knotis-concept-flash-background: var(--knotis-concept-flash-bg);
  --knotis-concept-flash-outline: var(--knotis-concept-color);
  --knotis-hashtag-text: var(--hashtag3);
  --knotis-hashtag-background: color-mix(in srgb, var(--hashtag3) 14%, transparent);
  --knotis-hashtag-hover-background: color-mix(in srgb, var(--hashtag3) 22%, transparent);
  --knotis-hashtag-mark-background: color-mix(in srgb, var(--hashtag3) 28%, transparent);
  --knotis-hashtag-mark-text: var(--hashtag3);
  --knotis-block-highlight-background: color-mix(in srgb, var(--hashtag3) 42%, transparent);
  --knotis-block-highlight-mid-background: color-mix(in srgb, var(--hashtag3) 26%, transparent);
  --knotis-block-highlight-outline: var(--hashtag3);
  --knotis-hyperlink-color: #0197a7;
  --knotis-accent-color: var(--knotis-concept-color);
  --knotis-accent-fill-color: color-mix(in srgb, var(--knotis-accent-color) 40%, #000);
  --knotis-accent-on-color: #fff;
  --knotis-accent-bg-subtle: color-mix(in srgb, var(--knotis-accent-color) 12%, var(--md-default-bg-color));
  --knotis-accent-border: color-mix(in srgb, var(--knotis-accent-color) 32%, transparent);
}

/* Bridge Material chrome: foreground accent for links/icons; fill accent for solid primary controls. */
[data-md-color-scheme="default"][data-md-color-primary],
[data-md-color-scheme="slate"][data-md-color-primary] {
  --md-primary-fg-color: var(--knotis-accent-fill-color);
  --md-primary-fg-color--light: color-mix(in srgb, var(--knotis-accent-fill-color) 72%, var(--knotis-accent-on-color));
  --md-primary-fg-color--dark: color-mix(in srgb, var(--knotis-accent-fill-color) 82%, #000);
  --md-primary-bg-color: var(--knotis-accent-on-color);
  --md-typeset-a-color: var(--knotis-hyperlink-color);
  --md-accent-fg-color: var(--knotis-accent-color);
  --md-accent-fg-color--transparent: color-mix(in srgb, var(--knotis-accent-color) 12%, transparent);
}

.md-typeset .md-button--primary,
.md-typeset .md-button--primary:focus,
.md-typeset .md-button--primary:hover {
  background-color: var(--knotis-accent-fill-color);
  color: var(--knotis-accent-on-color);
  opacity: 1;
}