/* Hopr Brand Colors */
:root {
    /* Primary Hopr Blue */
    --hopr-blue: #428cf6;
    --hopr-blue-light: #58c2e4;
    --hopr-blue-dark: #143f90;

    /* Accent Yellow/Gold */
    --hopr-yellow: #f6d699;
    --hopr-yellow-light: #f5b63e;
    --hopr-yellow-dark: #e86239;

    /* Supporting colors */
    --hopr-white: #ebeced;
    --hopr-black: #222224;
    --hopr-gray: #4A4A4A;
    --hopr-gray-light: #818286;
    --hopr-gray-lighter: #808080;

    /* Status colors */
    --hopr-success: #3cbe74;
    --hopr-warning: #fdcb6e;
    --hopr-error: #e86239;
    --hopr-info: #74b9ff;
    /*  Header bar tall enough to hold a 64px logo */
    --md-header-height: 74px;
}

/* Light mode */
[data-md-color-scheme="default"] {
    --md-primary-fg-color: var(--hopr-blue);
    --md-primary-fg-color--light: var(--hopr-blue-light);
    --md-primary-fg-color--dark: var(--hopr-blue-dark);
    --md-accent-fg-color: var(--hopr-yellow);
    --md-accent-fg-color--transparent: rgba(255, 251, 0, 0.1);
}

/* By default (or in light mode), hide the dark logo */
[data-md-color-scheme="default"] .logo-dark {
    display: none;
}

/* Dark mode */
[data-md-color-scheme="slate"] {
    --md-primary-fg-color: var(--hopr-blue-light);
    --md-primary-fg-color--light: #3333ff;
    --md-primary-fg-color--dark: var(--hopr-blue);
    --md-accent-fg-color: var(--hopr-yellow);
    --md-accent-fg-color--transparent: rgba(255, 251, 0, 0.1);
}

/* In dark mode (slate), hide the light logo and show the dark one */
[data-md-color-scheme="slate"] .logo-light {
    display: none;
}

[data-md-color-scheme="slate"] .logo-dark {
    display: inline-block;
    /* Re-enable display */
}

/* Custom admonition styles */
.md-typeset .admonition.hopr-note {
    border-left: 4px solid var(--hopr-blue);
}

.md-typeset .admonition.hopr-note>.admonition-title {
    background-color: rgba(0, 0, 180, 0.1);
}

.md-typeset .admonition.hopr-warning {
    border-left: 4px solid var(--hopr-yellow-dark);
}

.md-typeset .admonition.hopr-warning>.admonition-title {
    background-color: rgba(255, 251, 0, 0.1);
}

/* Code block styling */
.md-typeset code {
    background-color: var(--hopr-white);
    color: var(--hopr-black);
}

[data-md-color-scheme="slate"] .md-typeset code {
    background-color: var(--hopr-gray-light);
    color: #e2e8f0;
}

/* Navigation tabs */
.md-tabs {
    background-color: var(--hopr-blue);
}

/* Links */
.md-typeset a {
    color: var(--hopr-blue);
}

.md-typeset a:hover {
    color: var(--hopr-blue-light);
}

[data-md-color-scheme="slate"] .md-typeset a {
    color: var(--hopr-blue-light);
}

/* Buttons */
.md-button {
    background-color: var(--hopr-yellow);
    color: var(--hopr-gray);
    border: none;
}

.md-button:hover {
    background-color: var(--hopr-yellow-dark);
}

.md-button--primary {
    background-color: var(--hopr-blue);
    color: white;
}

.md-button--primary:hover {
    background-color: var(--hopr-blue-light);
}

/* Header logo sizing */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
    height: 64px;
    width: auto;
}

.md-header {
    background-color: #143f90;
}

/* Footer styling */
.md-footer {
    background-color: var(--hopr-gray);
}

/* Search */
.md-search__input {
    background-color: rgba(255, 255, 255, 0.1);
}

.md-search__input:focus {
    background-color: rgba(255, 255, 255, 0.2);
}