/* Palette taken from the iDRAC mark itself, then checked against WCAG 2.1 AA (4.5:1 for
 * normal text). Computed ratios: white on #0063b8 = 6.04:1; #0063b8 on white = 6.04:1;
 * #31a2e3 on the slate body = 5.68:1. Do not swap in a lighter blue for the light scheme
 * or a darker one for dark without re-checking; the mid tones fail. */

/* Light scheme */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #0063b8;        /* header bg; white text 6.04:1 */
  --md-primary-fg-color--light: #2393dd;
  --md-primary-fg-color--dark: #004a8f;
  --md-primary-bg-color: #ffffff;        /* header foreground text */
  --md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7);
  --md-accent-fg-color: #004a8f;         /* interactive/hover; 8.84:1 on white */
  --md-typeset-a-color: #0063b8;         /* body links; 6.04:1 on white */
}

/* Dark (slate) scheme */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #0063b8;        /* header bg; white text 6.04:1 */
  --md-primary-fg-color--light: #2393dd;
  --md-primary-fg-color--dark: #004a8f;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7);
  --md-accent-fg-color: #5cc1ee;         /* interactive/hover; 7.91:1 on slate */
  --md-typeset-a-color: #31a2e3;         /* body links; 5.68:1 on slate */
}

/* Screenshots of the Domoticz UI read better with a border in both schemes. */
.md-typeset img[src*="assets/"] {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 4px;
}

/* The hero carries its own background and rounded cards, so the screenshot border above
 * would draw a second frame around it. Let it run the full width instead. */
.md-typeset img.hero {
  border: 0;
  border-radius: 8px;
  width: 100%;
  margin: 0 0 1.2rem;
}