:root,
[data-theme="brand"] {
    --theme-bg: #faeae2;
    --theme-surface: rgb(217 202 183 / 32%);
    --theme-surface-strong: rgb(255 255 255 / 56%);
    --theme-surface-faint: rgb(255 255 255 / 24%);
    --theme-text: #003c96;
    --theme-text-muted: rgb(0 60 150 / 68%);
    --theme-border: rgb(0 60 150 / 24%);
    --theme-action: #003c96;
    --theme-action-text: #faeae2;
    --theme-action-hover: #174fa4;
    --theme-focus: #003c96;
    --theme-selection: #003c96;
    --theme-selection-text: #faeae2;
    --theme-glass-highlight: rgb(255 255 255 / 74%);
    --theme-glass-shadow: rgb(0 60 150 / 12%);
    --theme-shadow: 0 22px 55px rgb(0 60 150 / 10%);
}

[data-theme="mono"] {
    color-scheme: light;
    --theme-bg: #ffffff;
    --theme-surface: #ffffff;
    --theme-surface-strong: #ffffff;
    --theme-surface-faint: #ffffff;
    --theme-text: #000000;
    --theme-text-muted: #000000;
    --theme-border: #000000;
    --theme-action: #000000;
    --theme-action-text: #ffffff;
    --theme-action-hover: #ffffff;
    --theme-focus: #000000;
    --theme-selection: #000000;
    --theme-selection-text: #ffffff;
    --theme-glass-highlight: #ffffff;
    --theme-glass-shadow: transparent;
    --theme-shadow: none;
}

[data-theme] {
    background: var(--theme-bg);
    color: var(--theme-text);
}

[data-theme] ::selection {
    background: var(--theme-selection);
    color: var(--theme-selection-text);
}