:root {
    /* Semantic brand + common tokens from Sprout docs (Aceve/Common). */
    --brand-primary: #447952;
    --brand-primary-hover: #24462a;
    --brand-primary-pressed: #152f1a;
    --brand-on-primary: #ffffff;
    --brand-primary-container: #f4ffe0;
    --brand-on-primary-container: #152f1a;

    --color-background: #f9f9f9;
    --color-on-background: #1a1a1a;
    --color-surface: #ffffff;
    --color-on-surface: #1a1a1a;
    --color-surface-variant: #e5e5e5;
    --color-on-surface-variant: #1a1a1a;
    --color-supporting-text: #595959;

    --color-link: #9676b8;
    --color-link-hover: #483959;

    /* Material for MkDocs mappings. */
    --md-primary-fg-color: var(--brand-primary);
    --md-primary-fg-color--light: #bdd78f;
    --md-primary-fg-color--dark: var(--brand-primary-pressed);
    --md-accent-fg-color: var(--color-link);
    --md-default-bg-color: var(--color-background);
    --md-default-fg-color: var(--color-on-surface);
    --md-default-fg-color--light: var(--color-supporting-text);
    --md-typeset-a-color: var(--color-link);
}

[data-md-color-scheme="slate"] {
    --md-default-bg-color: #1a1a1a;
    --md-default-fg-color: #f2f2f2;
    --md-default-fg-color--light: #cccccc;
    --md-typeset-a-color: #cfabf4;
}

/* Landing page hero */
.landing-hero {
    text-align: center;
    padding: 2.5rem 1rem 1rem;
}

.landing-hero h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.landing-hero p {
    color: var(--md-default-fg-color--light);
    font-size: 12px;
    max-width: 640px;
    margin: 0 auto 0.5rem;
}

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