/* crudauth brand: teal */
:root {
    --md-primary-fg-color: #0d9488;
    --md-primary-fg-color--light: #14b8a6;
    --md-primary-fg-color--dark: #0f766e;
}
:root {
    --md-accent-fg-color: #14b8a6;
}

/* Dark mode: a very dark gray rather than near-black. */
[data-md-color-scheme="slate"] {
    --md-default-bg-color: #1a1d23;
    --md-default-bg-color--light: #1a1d23;
    --md-default-bg-color--lighter: #1a1d23;
}

/* Theme-aware images (Material #only-light / #only-dark convention) */
[data-md-color-scheme="default"] img[src$="#only-dark"] { display: none; }
[data-md-color-scheme="slate"] img[src$="#only-light"] { display: none; }

/* Dark header/tabs in both modes, so the two-tone wordmark logo always reads
   (a teal header would hide the teal half of the mark and look washed out). */
.md-header,
.md-tabs {
    background-color: #0b1220;
    color: #ffffff;
}

/* The logo image already spells "crudauth" - hide the duplicate site title. */
.md-header__topic:first-child {
    display: none;
}

/* Size the icon+wordmark lockup for the header bar. */
.md-header__button.md-logo img {
    height: 1.9rem;
    width: auto;
}

/* The dark header doesn't reach Material's search field, so in light mode it
   renders dark-on-dark. Force the resting search field legible on the dark bar.
   (The focused/open state keeps Material's higher-specificity dark-on-white.) */
.md-search__form {
    background-color: rgba(255, 255, 255, 0.12);
}
.md-search__form:hover {
    background-color: rgba(255, 255, 255, 0.2);
}
.md-search__input {
    color: #ffffff;
}
.md-search__input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}
.md-search__icon {
    color: #ffffff;
}