:root {
    --bts-card-surface: var(--main-page-background-color, #f3f3f4);
    --bts-border: #a6aeba;
    --bts-icon-button-icon: #454545;
    --bts-icon-button-icon-border: #454545;
    --bts-selected-row-bg: #f5f9fd;

    --bts-text-primary: #1d629f;
    --bts-text-body: #475467;
    --bts-text-secondary: #646464;
    --bts-faint: #c6cdd6;

    --bts-link-blue: #2f7cc0;
    --bts-link-blue-light: #4189c9;
    --bts-soft-blue: #84b6e0;
    --bts-accent-blue: #2f7cc0;
    --bts-seller-accent: #ffac42;
    --bts-other-accent: #9753a9;

    --bts-green: #2f9e5f;
    --bts-green-text: #2f7d52;
    --bts-light-green: #e9f4ee;

    --bts-light-red: color-mix(in srgb, var(--bts-red, #ed5565) 18%, #fff);
    --bts-red-text: color-mix(in srgb, var(--bts-red, #ed5565) 70%, #000);
    --bts-seller-code: #d96a82;

    --bts-light-blue: color-mix(in srgb, var(--bts-soft-blue) 22%, #fff);
    --bts-blue-text: color-mix(in srgb, var(--bts-soft-blue) 70%, #000);
    --bts-light-dark: color-mix(in srgb, var(--bts-text-secondary) 18%, #fff);
    --bts-dark-text: color-mix(in srgb, var(--bts-text-secondary) 80%, #000);
    --bts-light-orange: color-mix(in srgb, var(--bts-orange) 18%, #fff);
    --bts-orange-text: color-mix(in srgb, var(--bts-orange) 70%, #000);

    --bts-segment-fill: var(--main-page-background-color, #f3f3f4);
    --bts-segment-label: #5a6472;

    --bts-target-red: #df4a3c;
    --bts-chip-outline-text: #69727f;
    --bts-chip-outline-border: #d6dbe2;

    --bts-orange: #fd7e14;
    --bts-light-grey: #eef1f5;
    --bts-medium-grey: #a7b1c2;
    --bts-row-divider: color-mix(in srgb, var(--bts-border) 50%, transparent);

    --bts-dayslot-header-bg: #333;
    --bts-dayslot-header-text: #fff;
    --bts-dayslot-header-muted: #fff;
    --bts-dayslot-team-bg: #444444;
}

html[data-bs-theme=dark] {
    --bts-card-surface: #23272e;
    --bts-accent-blue: #4d8bc9;
    --bts-seller-accent: #ffac42;
    --bts-other-accent: #9753a9;
    --bts-border: #515a68;
    --bts-icon-button-icon: #b8bdc6;
    --bts-icon-button-border: #515a68;
    --bts-selected-row-bg: rgba(82, 144, 203, .10);

    --bts-text-primary: #6db1ec;
    --bts-text-body: #c3cbd6;
    --bts-text-secondary: #9aa4b3;
    --bts-faint: #4a5160;

    --bts-link-blue: #5da4e8;
    --bts-soft-blue: #4d80b8;

    --bts-green: #4cba7e;
    --bts-green-text: #62c992;
    --bts-light-green: rgba(86, 196, 138, .13);

    --bts-light-red: color-mix(in srgb, var(--bts-red, #ed5565) 15%, transparent);
    --bts-red-text: color-mix(in srgb, var(--bts-red, #ed5565) 65%, #fff);
    --bts-seller-code: #f093a4;

    --bts-light-blue: color-mix(in srgb, var(--bts-soft-blue) 15%, transparent);
    --bts-blue-text: color-mix(in srgb, var(--bts-soft-blue) 70%, #fff);
    --bts-light-dark: color-mix(in srgb, var(--bts-text-secondary) 15%, transparent);
    --bts-dark-text: color-mix(in srgb, var(--bts-text-secondary) 70%, #fff);
    --bts-light-orange: color-mix(in srgb, var(--bts-orange) 15%, transparent);
    --bts-orange-text: color-mix(in srgb, var(--bts-orange) 70%, #fff);

    --bts-segment-fill: #2a3038;
    --bts-segment-label: #aab4c2;

    --bts-target-red: #ef6a5c;
    --bts-chip-outline-text: #98a2b3;
    --bts-chip-outline-border: #424a56;

    --bts-light-grey: #343b46;
    --bts-medium-grey: #7d8593;

    --bts-dayslot-header-bg: var(--bts-light-grey);
    --bts-dayslot-header-text: var(--bts-text-body);
    --bts-dayslot-header-muted: var(--bts-medium-grey);
    --bts-dayslot-team-bg: var(--bts-card-surface);
}