:root {
    /** Typography **/
    /* The font family used for headers, ToC entries, etc */
    --verso-structure-font-family: "Helvetica Neue", "Segoe UI", "Roboto", Arial, sans-serif;
    /* The font family used for body text */
    --verso-text-font-family: "Helvetica Neue", "Segoe UI", "Roboto", Arial, sans-serif;
    /* The font family used for code */
    --verso-code-font-family: monospace;

    /** Background colors **/
    --verso-background-color: #ffffff;
    /*
    "Surface" is a secondary background used for elevated UI regions, such as sidebars, controls,
    and overlays that sit on top of the page background.
    */
    --verso-surface-color: #f9fbfd;

    /** Text colors **/
    --verso-text-color: #333333;
    --verso-text-color-light: #64748b;
    --verso-code-color: black;
    --verso-structure-color: black;

    /** Link colors **/
    --verso-link-color: #386ee0;
    --verso-link-hover-color: #0073e6;

    /** Border colors **/
    --verso-border-color: #e4ebf3;
    --verso-border-color-light: #d1d9e2;
    --verso-search-box-border-color: #8ea1b3;
    --verso-search-box-border-active-color: var(--verso-link-color);

    /** Selected items (e.g. search results) */
    --verso-selected-color: #def;

    /** Shadow colors **/
    --verso-shadow-color: rgba(35, 55, 139, 0.1);

    /** Hover/tooltip colors **/
    --verso-hover-background-color: #e5e5e5;
    --verso-hover-highlight-color: #eeeeee;
    --verso-error-hover-color: #ffb3b3;
    --verso-info-hover-color: #b3d4ff;

    /** Message colors **/
    /*
    These colors are used to render Lean's feedback. They come in three severities and two
    variants. The raw color itself is used for the text of a message of the indicated severity,
    while the presence of such a message is indicated using the indicator color (e.g. via a
    wavy underline or a bar in the margin).
    */
    --verso-info-color: black;
    --verso-info-indicator-color: #4777ff;
    --verso-warning-color: black;
    --verso-warning-indicator-color: #e7a71d; /* 2.11 contrast ratio for white, 9.94 for black */
    --verso-error-color: #cc0000;
    --verso-error-indicator-color: #ff0000;

    /** Code Highlighting **/
    /*
    These variables control the rendering of Lean code emitted by Verso. Each category that can be
    highlighted supports the customization of color, weight, style, and family.
    */
    /* Constants (e.g. `List` or `id` or `none`) */
    --verso-code-const-color: var(--verso-code-color);
    --verso-code-const-weight: normal;
    --verso-code-const-style: normal;
    --verso-code-const-font-family: var(--verso-code-font-family);

    /* Keywords/atoms (e.g. `for` or `def` or `induction`) */
    --verso-code-keyword-color: var(--verso-code-color);
    --verso-code-keyword-weight: bold;
    --verso-code-keyword-style: normal;
    --verso-code-keyword-font-family: var(--verso-code-font-family);

    /* Local bindings (e.g. `x` in `let x := 5`) */
    --verso-code-var-color: var(--verso-code-color);
    --verso-code-var-weight: normal;
    --verso-code-var-style: italic;
    --verso-code-kw-font-family: var(--verso-code-font-family);
}

/** Dark mode - opt-in via data-verso-dark-mode and respects OS preference **/
@media (prefers-color-scheme: dark) {
    :root[data-verso-dark-mode]:not([data-theme="light"]) {
        /** Background colors **/
        --verso-background-color: #1e1e1e;
        --verso-surface-color: #181818;

        /** Text colors **/
        --verso-text-color: #eeeeee;
        --verso-text-color-light: #bbbbbb;
        --verso-code-color: #eeeeee;
        --verso-structure-color: #eeeeee;

        /** Link colors **/
        --verso-link-color: #3b94ff;
        --verso-link-hover-color: #4d9efc;

        /** Border colors **/
        --verso-border-color: #4c4c4c;
        --verso-border-color-light: #666666;
        --verso-search-box-border-color: #8694a3;
        --verso-search-box-border-active-color: #5ca7ff;

        /** Selected items (e.g. search results) */
        --verso-selected-color: #2a4a6a;

        /** Shadow colors **/
        --verso-shadow-color: rgba(0, 0, 0, 0.5);

        /** Hover/tooltip colors **/
        --verso-hover-background-color: #3a3a3a;
        --verso-hover-highlight-color: #444444;
        --verso-error-hover-color: #5c2a2a;
        --verso-info-hover-color: #2a3d5c;

        /** Message colors **/
        --verso-info-color: #eeeeee;
        --verso-info-indicator-color: #4777ff;
        --verso-warning-color: #eeeeee;
        --verso-warning-indicator-color: #e7a71d;
        --verso-error-color: #ff6666;
        --verso-error-indicator-color: #ff4444;
    }
}

/** Manual dark mode override **/
:root[data-verso-dark-mode][data-theme="dark"] {
    /** Background colors **/
    --verso-background-color: #1e1e1e;
    --verso-surface-color: #181818;

    /** Text colors **/
    --verso-text-color: #eeeeee;
    --verso-text-color-light: #bbbbbb;
    --verso-code-color: #eeeeee;
    --verso-structure-color: #eeeeee;

    /** Link colors **/
    --verso-link-color: #3b94ff;
    --verso-link-hover-color: #4d9efc;

    /** Border colors **/
    --verso-border-color: #4c4c4c;
    --verso-border-color-light: #666666;
    --verso-search-box-border-color: #8694a3;
    --verso-search-box-border-active-color: #5ca7ff;

    /** Selected items (e.g. search results) */
    --verso-selected-color: #2a4a6a;

    /** Shadow colors **/
    --verso-shadow-color: rgba(0, 0, 0, 0.5);

    /** Hover/tooltip colors **/
    --verso-hover-background-color: #3a3a3a;
    --verso-hover-highlight-color: #444444;
    --verso-error-hover-color: #5c2a2a;
    --verso-info-hover-color: #2a3d5c;

    /** Message colors **/
    --verso-info-color: #eeeeee;
    --verso-info-indicator-color: #4777ff;
    --verso-warning-color: #eeeeee;
    --verso-warning-indicator-color: #e7a71d;
    --verso-error-color: #ff6666;
    --verso-error-indicator-color: #ff4444;
}