/* Custom CSS to match your brand design */
/* Save this as docs/stylesheets/custom.css */

:root {
    /* Your brand colors based on the image */
    --brand-blue: #00bcd4;
    --brand-pink: #e91e63;
    --brand-purple: #9c27b0;
    --dark-bg: #0a0a0a;
    --gradient-start: #e91e63;
    --gradient-end: #00bcd4;
}

/* Header customization */
.md-header {
    background: linear-gradient(
        135deg,
        var(--brand-pink),
        var(--brand-purple),
        var(--brand-blue)
    );
}

/* Navigation accent colors */
.md-nav__link--active {
    color: var(--brand-blue) !important;
}

.md-nav__link:hover {
    color: var(--brand-pink) !important;
}

/* Code block styling */
.md-typeset .highlight {
    background: rgba(0, 188, 212, 0.1);
    border-left: 4px solid var(--brand-blue);
}

/* Link colors */
.md-typeset a {
    color: var(--brand-blue);
}

.md-typeset a:hover {
    color: var(--brand-pink);
}

/* Button styling */
.md-button {
    background: linear-gradient(45deg, var(--brand-pink), var(--brand-blue));
    border: none;
    color: white;
}

.md-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 188, 212, 0.3);
}

/* Search box */
.md-search__input {
    background: rgba(0, 188, 212, 0.1);
    border: 1px solid var(--brand-blue);
}

/* Admonitions (callout boxes) */
.md-typeset .admonition.info {
    border-color: var(--brand-blue);
}

.md-typeset .admonition.note {
    border-color: var(--brand-purple);
}

/* Footer */
.md-footer {
    background: linear-gradient(135deg, var(--dark-bg), rgba(0, 188, 212, 0.1));
}