body {
    color: var(--color-grey12);
    background-color: var(--color-grey1);

    h1 {
        color: var(--color-primary12);
    }

    img {
        filter: hue-rotate(19deg);
    }
}

[data-color-scheme="light"] body {
    --color-iris1:  #fffeff;
    --color-iris2:  #fffeff;
    --color-iris3:  #f7f3ff;
    --color-iris4:  #e3d4ff;
    --color-iris5:  #c7b0f2;
    --color-iris6:  #b298e1;
    --color-iris7:  #9e80d1;
    --color-iris8:  #8a68c1;
    --color-iris9:  #725794;
    --color-iris10: #573a81;
    --color-iris11: #382554;
    --color-iris12: #1c122c;

    --color-primary1: var(--color-iris1);
    --color-primary2: var(--color-iris2);
    --color-primary3: var(--color-iris3);
    --color-primary4: var(--color-iris4);
    --color-primary5: var(--color-iris5);
    --color-primary6: var(--color-iris6);
    --color-primary7: var(--color-iris7);
    --color-primary8: var(--color-iris8);
    --color-primary9: var(--color-iris9);
    --color-primary10: var(--color-iris10);
    --color-primary11: var(--color-iris11);
    --color-primary12: var(--color-iris12);

    --outline-color: var(--color-primary9);

    --button-background-color: var(--color-primary1);
    --button-border-color: var(--color-primary9);
    --button-color: var(--color-primary9);

    button,
    .button {
        --button-background-color: var(--color-primary1);
        --button-border-color: var(--color-primary9);
        --button-color: var(--color-primary9);
    }

    button:hover:not(:disabled),
    .button:hover:not(:disabled),
    button[aria-expanded="true"],
    .button[aria-expanded="true"] {
        --button-background-color: var(--color-primary3);
        --button-border-color: var(--color-primary12);
        --button-color: var(--color-primary12);
    }

    .button--primary {
        --button-background-color: var(--color-iris9);
        --button-border-color: var(--color-iris9);
        --button-color: var(--color-iris1);
    }

    .button--primary:hover:not(:disabled),
    .button--primary[aria-expanded="true"] {
        --button-background-color: var(--color-iris12);
        --button-border-color: var(--color-iris12);
        --button-color: var(--color-iris1);
    }

    .button--danger {
        --outline-color: var(--color-error11);
        --button-background-color: var(--color-error11);
        --button-border-color: var(--color-error11);
        --button-color: var(--color-error1);
    }

    .button--danger:hover:not(:disabled),
    .button--danger[aria-expanded="true"] {
        --button-background-color: var(--color-error12);
        --button-border-color: var(--color-error12);
        --button-color: var(--color-primary1);
    }

    .button--ghost {
        --button-background-color: transparent;
        --button-border-color: transparent;
    }

    .button--ghost:hover,
    .button--ghost[aria-expanded="true"] {
        --button-background-color: transparent;
        --button-border-color: var(--color-primary6);
    }

    .button--menuitem {
        --button-padding: var(--space-small) var(--space-smaller);
        --button-background-color: transparent;
    }
}

[data-color-scheme="dark"] body {
    --color-iris1:  #fffeff;
    --color-iris2:  #fffeff;
    --color-iris3:  #f7f3ff;
    --color-iris4:  #e3d4ff;
    --color-iris5:  #c7b0f2;
    --color-iris6:  #b298e1;
    --color-iris7:  #9e80d1;
    --color-iris8:  #8a68c1;
    --color-iris9:  #725794;
    --color-iris10: #573a81;
    --color-iris11: #382554;
    --color-iris12: #1c122c;

    --color-iris-dark1:  #1c122c;
    --color-iris-dark2:  #2a203b;
    --color-iris-dark3:  #392f4b;
    --color-iris-dark4:  #503975;
    --color-iris-dark5:  #5f4489;
    --color-iris-dark6:  #7253a2;
    --color-iris-dark7:  #8b67c3;
    --color-iris-dark8:  #a47ee2;
    --color-iris-dark9:  #e0c2ff;
    --color-iris-dark10: #f7f3ff;
    --color-iris-dark11: #fffeff;
    --color-iris-dark12: #fffeff;

    --color-primary1: var(--color-iris-dark1);
    --color-primary2: var(--color-iris-dark2);
    --color-primary3: var(--color-iris-dark3);
    --color-primary4: var(--color-iris-dark4);
    --color-primary5: var(--color-iris-dark5);
    --color-primary6: var(--color-iris-dark6);
    --color-primary7: var(--color-iris-dark7);
    --color-primary8: var(--color-iris-dark8);
    --color-primary9: var(--color-iris-dark9);
    --color-primary10: var(--color-iris-dark10);
    --color-primary11: var(--color-iris-dark11);
    --color-primary12: var(--color-iris-dark12);

    --outline-color: var(--color-primary9);
}