/* Interact brand palette for the customer guide.
 *
 * Material's built-in palettes are a fixed set of Material Design hues, none of
 * which is the Interact green, so the theme is set to `primary: custom` /
 * `accent: custom` and the colours are supplied here. The values are the
 * tokens from docs/guides/interact-dc-design-guide.md -- the same ones the
 * application's stylesheet uses -- so the guide and the product read as one
 * thing. Change them in both places or not at all.
 *
 * The internal guide deliberately does NOT load this: it stays indigo so that a
 * staff page is never mistaken for a customer-facing one.
 */

:root {
    --interact-green: #009d6c;
    --interact-green-hover: #008559;
    --interact-green-light: #e6f7f2;
    /* Darkened for body text and links, where the brand green on white falls
     * short of WCAG AA at normal text sizes. */
    --interact-green-ink: #00734f;
    /* Lifted for dark mode, where the brand green on a near-black background is
     * too dim to read comfortably. */
    --interact-green-bright: #16c98d;
}

[data-md-color-primary="custom"] {
    --md-primary-fg-color: var(--interact-green);
    --md-primary-fg-color--light: var(--interact-green-bright);
    --md-primary-fg-color--dark: var(--interact-green-hover);
    --md-primary-bg-color: #ffffff;
    --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
}

[data-md-color-accent="custom"] {
    --md-accent-fg-color: var(--interact-green-hover);
    --md-accent-fg-color--transparent: rgba(0, 157, 108, 0.1);
    --md-accent-bg-color: #ffffff;
    --md-accent-bg-color--light: rgba(255, 255, 255, 0.7);
}

[data-md-color-scheme="default"] {
    --md-typeset-a-color: var(--interact-green-ink);
}

[data-md-color-scheme="slate"] {
    --md-typeset-a-color: var(--interact-green-bright);
    --md-accent-fg-color: var(--interact-green-bright);
}

/* The wordmark is wide and short; Material's default logo box is square. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
    height: 1.4rem;
    width: auto;
}

/* Admonition and section accents inherit the primary colour by default, but
 * the "note" flavour is hard-coded blue. Bring it into the brand. */
.md-typeset .admonition.note,
.md-typeset details.note {
    border-color: var(--interact-green);
}

.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
    background-color: var(--interact-green-light);
}

.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before {
    background-color: var(--interact-green);
}

[data-md-color-scheme="slate"] .md-typeset .note > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .note > summary {
    background-color: rgba(0, 157, 108, 0.2);
}