@import url("https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap");

/* Livewire brand palette:
   yellow #FFA500, signal red #F40B0B, charcoal #2B2A2A */

:root {
  --lw-amber: #ffa500;
  --lw-amber-dark: #e08a00;
  --lw-red: #f40b0b;
  --lw-charcoal: #2b2a2a;
}

/* Light scheme */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--lw-charcoal);
  --md-primary-fg-color--light: #4a4848;
  --md-primary-fg-color--dark: #1c1b1b;
  --md-accent-fg-color: var(--lw-amber-dark);
  --md-accent-fg-color--transparent: color-mix(in srgb, var(--lw-amber-dark) 10%, transparent);
  --md-typeset-a-color: var(--lw-amber-dark);
}

/* Dark scheme */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--lw-charcoal);
  --md-primary-fg-color--light: #4a4848;
  --md-primary-fg-color--dark: #1c1b1b;
  --md-accent-fg-color: var(--lw-amber);
  --md-accent-fg-color--transparent: color-mix(in srgb, var(--lw-amber) 10%, transparent);
  --md-typeset-a-color: var(--lw-amber);
  --md-default-bg-color: #1e1d1d;
}

/* Mermaid diagrams — pin explicit brand colors; the derived defaults
   lose contrast against the custom charcoal palette */
[data-md-color-scheme="default"] {
  --md-mermaid-edge-color: #4a4848;
  --md-mermaid-node-bg-color: color-mix(in srgb, var(--lw-amber) 12%, white);
  --md-mermaid-node-fg-color: var(--lw-amber-dark);
  --md-mermaid-label-bg-color: #ffffff;
  --md-mermaid-label-fg-color: var(--lw-charcoal);
  --md-mermaid-sequence-actor-bg-color: #ffffff;
  --md-mermaid-sequence-actor-border-color: var(--lw-amber-dark);
  --md-mermaid-sequence-actor-fg-color: var(--lw-charcoal);
  --md-mermaid-sequence-actor-line-color: #b5b1ab;
  --md-mermaid-sequence-message-line-color: #4a4848;
  --md-mermaid-sequence-message-fg-color: var(--lw-charcoal);
  --md-mermaid-sequence-note-bg-color: color-mix(in srgb, var(--lw-amber) 15%, white);
  --md-mermaid-sequence-note-border-color: var(--lw-amber-dark);
  --md-mermaid-sequence-note-fg-color: var(--lw-charcoal);
  --md-mermaid-sequence-loop-border-color: var(--lw-amber-dark);
  --md-mermaid-sequence-loop-fg-color: var(--lw-charcoal);
}

[data-md-color-scheme="slate"] {
  --md-mermaid-edge-color: #c8c4bf;
  --md-mermaid-node-bg-color: color-mix(in srgb, var(--lw-amber) 20%, #1e1d1d);
  --md-mermaid-node-fg-color: var(--lw-amber);
  --md-mermaid-label-bg-color: #1e1d1d;
  --md-mermaid-label-fg-color: #eceae7;
  --md-mermaid-sequence-actor-bg-color: var(--lw-charcoal);
  --md-mermaid-sequence-actor-border-color: var(--lw-amber);
  --md-mermaid-sequence-actor-fg-color: #eceae7;
  --md-mermaid-sequence-actor-line-color: #7a766f;
  --md-mermaid-sequence-message-line-color: #c8c4bf;
  --md-mermaid-sequence-message-fg-color: #eceae7;
  --md-mermaid-sequence-note-bg-color: #33312e;
  --md-mermaid-sequence-note-border-color: var(--lw-amber);
  --md-mermaid-sequence-note-fg-color: #eceae7;
  --md-mermaid-sequence-loop-border-color: var(--lw-amber);
  --md-mermaid-sequence-loop-fg-color: #eceae7;
}

/* Current page in the navigation sidebar in brand red */
.md-nav__link--active,
.md-nav__item .md-nav__link--active code {
  color: var(--lw-red);
}

/* Amber hazard stripe under the header, like the logo's chevrons */
.md-header {
  border-bottom: 4px solid var(--lw-amber);
}

/* Title bar in the brand display font */
.md-header__title {
  font-family: "Black Han Sans", sans-serif;
  font-weight: 400;
}

/* Round the logo a touch so the badge sits nicely in the header */
.md-header__button.md-logo img {
  border-radius: 4px;
}

/* Search highlight in brand amber */
.md-typeset mark {
  background-color: color-mix(in srgb, var(--lw-amber) 40%, transparent);
}

/* Text selection in brand red */
::selection {
  background-color: var(--lw-red);
  color: #fff;
}