.tb-bg {
    background: var(--color-bg)
}

.tb-surface {
    background: var(--color-surface)
}

.tb-surface-alt {
    background: var(--color-surface-alt)
}

.tb-surface-raised {
    background: var(--color-surface-raised)
}

.tb-border {
    border: 1px solid var(--color-border)
}

.tb-border-strong {
    border: 1px solid var(--color-border-strong)
}

.tb-text {
    color: var(--color-text)
}

.tb-text-muted {
    color: var(--color-text-muted)
}

.tb-hover:hover {
    background: var(--color-hover-bg)
}

.tb-active {
    background: var(--color-active-bg);
    color: var(--color-active-text)
}

:root,
[data-theme="light"] {
    --color-bg: #f5f2ee;
    --color-surface: #fdfaf7;
    --color-surface-alt: #f0ece6;
    --color-surface-raised: #fdfaf7;
    --color-border: #ddd8d0;
    --color-border-strong: #5a4e3e;
    --color-text: #2a2420;
    --color-text-muted: #7a6e62;
    --color-text-inverse: #fdfaf7;
    --color-hover-bg: #ece8e2;
    --color-active-bg: #e0d9d0;
    --color-active-text: #2a2420;
    --color-section-bg: #ece8e2;
    --color-section-text: #7a6e62;
    --color-alert-success-bg: #eef2e8;
    --color-alert-success-border: #6a8a50;
    --color-alert-error-bg: #f5eaea;
    --color-alert-error-border: #a05050;
    --color-scrollbar: #c4bdb4;
    --color-focus-ring: rgba(90, 78, 62, 0.3);
    --navbar-height: 44px
}

[data-theme="light-warm"] {
    --color-bg: #faf7f2;
    --color-surface: #fffdf9;
    --color-surface-alt: #f2ede4;
    --color-surface-raised: #fffdf9;
    --color-border: #c8b89a;
    --color-border-strong: #8c6a30;
    --color-text: #2c1f0e;
    --color-text-muted: #8c7050;
    --color-text-inverse: #fffdf9;
    --color-hover-bg: #f0e8d8;
    --color-active-bg: #e8dcc8;
    --color-active-text: #2c1f0e;
    --color-section-bg: #f0e8d8;
    --color-section-text: #8c7050;
    --color-alert-success-bg: #eef2e4;
    --color-alert-success-border: #6a8040;
    --color-alert-error-bg: #f5ece8;
    --color-alert-error-border: #a06040;
    --color-scrollbar: #c4a878;
    --color-focus-ring: rgba(140, 106, 48, 0.3);
    --navbar-height: 44px
}

[data-theme="light-cool"] {
    --color-bg: #f2f5fa;
    --color-surface: #f8fafd;
    --color-surface-alt: #e8edf5;
    --color-surface-raised: #f8fafd;
    --color-border: #9ab2cc;
    --color-border-strong: #2a5080;
    --color-text: #0e1a2c;
    --color-text-muted: #4a6080;
    --color-text-inverse: #f8fafd;
    --color-hover-bg: #e0e8f4;
    --color-active-bg: #d0dcec;
    --color-active-text: #0e1a2c;
    --color-section-bg: #e0e8f4;
    --color-section-text: #4a6080;
    --color-alert-success-bg: #e8f2ec;
    --color-alert-success-border: #4a8060;
    --color-alert-error-bg: #f0e8ec;
    --color-alert-error-border: #804060;
    --color-scrollbar: #8aaac4;
    --color-focus-ring: rgba(42, 80, 128, 0.3);
    --navbar-height: 44px
}

[data-theme="light-paper"] {
    --color-bg: #f5f2eb;
    --color-surface: #faf8f3;
    --color-surface-alt: #ede9de;
    --color-surface-raised: #faf8f3;
    --color-border: #b8a98a;
    --color-border-strong: #6b5030;
    --color-text: #1a1209;
    --color-text-muted: #6a5840;
    --color-text-inverse: #faf8f3;
    --color-hover-bg: #e8e2d4;
    --color-active-bg: #dcd4c4;
    --color-active-text: #1a1209;
    --color-section-bg: #e8e2d4;
    --color-section-text: #6a5840;
    --color-alert-success-bg: #ecf0e4;
    --color-alert-success-border: #607840;
    --color-alert-error-bg: #f4ece8;
    --color-alert-error-border: #905040;
    --color-scrollbar: #b09878;
    --color-focus-ring: rgba(107, 80, 48, 0.3);
    --navbar-height: 44px
}

[data-theme="light-slate"] {
    --color-bg: #f4f5f7;
    --color-surface: #fafbfc;
    --color-surface-alt: #e8eaee;
    --color-surface-raised: #fafbfc;
    --color-border: #a0a8b4;
    --color-border-strong: #3a4a60;
    --color-text: #1c2130;
    --color-text-muted: #5a6478;
    --color-text-inverse: #fafbfc;
    --color-hover-bg: #e0e4ec;
    --color-active-bg: #d4d8e4;
    --color-active-text: #1c2130;
    --color-section-bg: #e0e4ec;
    --color-section-text: #5a6478;
    --color-alert-success-bg: #e8f0ec;
    --color-alert-success-border: #4a7058;
    --color-alert-error-bg: #f0e8ec;
    --color-alert-error-border: #784858;
    --color-scrollbar: #90a0b4;
    --color-focus-ring: rgba(58, 74, 96, 0.3);
    --navbar-height: 44px
}

[data-theme="light-mint"] {
    --color-bg: #f2faf7;
    --color-surface: #f8fdfa;
    --color-surface-alt: #e4f4ec;
    --color-surface-raised: #f8fdfa;
    --color-border: #8abfaa;
    --color-border-strong: #2a7054;
    --color-text: #0a2018;
    --color-text-muted: #3a6050;
    --color-text-inverse: #f8fdfa;
    --color-hover-bg: #d8eee6;
    --color-active-bg: #c8e4da;
    --color-active-text: #0a2018;
    --color-section-bg: #d8eee6;
    --color-section-text: #3a6050;
    --color-alert-success-bg: #e4f2e8;
    --color-alert-success-border: #3a7848;
    --color-alert-error-bg: #f2e8ec;
    --color-alert-error-border: #804858;
    --color-scrollbar: #70b090;
    --color-focus-ring: rgba(42, 112, 84, 0.3);
    --navbar-height: 44px
}

[data-theme="dark"] {
    --color-bg: #1a1714;
    --color-surface: #221f1b;
    --color-surface-alt: #181512;
    --color-surface-raised: #2c2822;
    --color-border: #3d3830;
    --color-border-strong: #8c7a5e;
    --color-text: #e8e0d0;
    --color-text-muted: #9e9282;
    --color-text-inverse: #1a1714;
    --color-hover-bg: #2a2620;
    --color-active-bg: #352e24;
    --color-active-text: #d4c4a8;
    --color-section-bg: #181512;
    --color-section-text: #6e6050;
    --color-alert-success-bg: #1e2518;
    --color-alert-success-border: #4a5e30;
    --color-alert-error-bg: #251818;
    --color-alert-error-border: #6e3030;
    --color-scrollbar: #4a4035;
    --color-focus-ring: rgba(140, 122, 94, 0.4);
    --navbar-height: 44px
}

[data-theme="dark-deep"] {
    --color-bg: #0e0e0e;
    --color-surface: #161616;
    --color-surface-alt: #0b0b0b;
    --color-surface-raised: #1f1f1f;
    --color-border: #2a2a2a;
    --color-border-strong: #757575;
    --color-text: #ededea;
    --color-text-muted: #888884;
    --color-text-inverse: #0e0e0e;
    --color-hover-bg: #1c1c1c;
    --color-active-bg: #252525;
    --color-active-text: #d4d4d0;
    --color-section-bg: #0b0b0b;
    --color-section-text: #555550;
    --color-alert-success-bg: #141a12;
    --color-alert-success-border: #3a5030;
    --color-alert-error-bg: #1a1212;
    --color-alert-error-border: #5a2a2a;
    --color-scrollbar: #333330;
    --color-focus-ring: rgba(117, 117, 117, 0.4);
    --navbar-height: 44px
}

[data-theme="dark-navy"] {
    --color-bg: #161920;
    --color-surface: #1e2129;
    --color-surface-alt: #13151c;
    --color-surface-raised: #262a35;
    --color-border: #30343f;
    --color-border-strong: #6b7394;
    --color-text: #dce0ec;
    --color-text-muted: #838899;
    --color-text-inverse: #161920;
    --color-hover-bg: #22262f;
    --color-active-bg: #2a2f3d;
    --color-active-text: #b8c0d8;
    --color-section-bg: #13151c;
    --color-section-text: #555c72;
    --color-alert-success-bg: #162030;
    --color-alert-success-border: #2e4a6e;
    --color-alert-error-bg: #221420;
    --color-alert-error-border: #6e2e4a;
    --color-scrollbar: #383d4e;
    --color-focus-ring: rgba(107, 115, 148, 0.4);
    --navbar-height: 44px
}

[data-theme="dark-charcoal"] {
    --color-bg: #1c1816;
    --color-surface: #252018;
    --color-surface-alt: #161210;
    --color-surface-raised: #2e2820;
    --color-border: #3d3830;
    --color-border-strong: #8c7a5e;
    --color-text: #e0d8d0;
    --color-text-muted: #9a8e82;
    --color-text-inverse: #1c1816;
    --color-hover-bg: #2a2420;
    --color-active-bg: #342c24;
    --color-active-text: #d0c0a8;
    --color-section-bg: #161210;
    --color-section-text: #6a5e50;
    --color-alert-success-bg: #1e2416;
    --color-alert-success-border: #4a5c2e;
    --color-alert-error-bg: #241818;
    --color-alert-error-border: #6c3030;
    --color-scrollbar: #4a4035;
    --color-focus-ring: rgba(140, 122, 94, 0.4);
    --navbar-height: 44px
}

[data-theme="dark-terminal"] {
    --color-bg: #141918;
    --color-surface: #1b2220;
    --color-surface-alt: #111716;
    --color-surface-raised: #232e2b;
    --color-border: #2c3a36;
    --color-border-strong: #5a8a72;
    --color-text: #d8e8e0;
    --color-text-muted: #7a9a8a;
    --color-text-inverse: #141918;
    --color-hover-bg: #1f2e2a;
    --color-active-bg: #263832;
    --color-active-text: #a8ccba;
    --color-section-bg: #111716;
    --color-section-text: #4a6a58;
    --color-alert-success-bg: #142218;
    --color-alert-success-border: #2e5e38;
    --color-alert-error-bg: #221414;
    --color-alert-error-border: #6e3030;
    --color-scrollbar: #324840;
    --color-focus-ring: rgba(90, 138, 114, 0.4);
    --navbar-height: 44px
}

[data-theme="dark-sepia"] {
    --color-bg: #1a1410;
    --color-surface: #221c16;
    --color-surface-alt: #150f0b;
    --color-surface-raised: #2c2418;
    --color-border: #3a2e20;
    --color-border-strong: #8c6a40;
    --color-text: #d4c4a8;
    --color-text-muted: #8c7860;
    --color-text-inverse: #1a1410;
    --color-hover-bg: #261e14;
    --color-active-bg: #30261a;
    --color-active-text: #c4b090;
    --color-section-bg: #150f0b;
    --color-section-text: #604e38;
    --color-alert-success-bg: #1c2210;
    --color-alert-success-border: #4a5828;
    --color-alert-error-bg: #221410;
    --color-alert-error-border: #6e3820;
    --color-scrollbar: #4a3828;
    --color-focus-ring: rgba(140, 106, 64, 0.4);
    --navbar-height: 44px
}

html,
body {
    background-color: var(--color-bg);
    color: var(--color-text)
}

.form-control,
.form-select {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text)
}

.form-control:focus,
.form-select:focus {
    background-color: var(--color-surface);
    border-color: var(--color-border-strong);
    color: var(--color-text);
    box-shadow: 0 0 0 3px var(--color-focus-ring)
}

.form-control::placeholder {
    color: var(--color-text-muted)
}

.dropdown-menu {
    background-color: var(--color-surface-raised);
    border-color: var(--color-border)
}

.dropdown-item {
    color: var(--color-text)
}

.dropdown-item:hover {
    background-color: var(--color-hover-bg);
    color: var(--color-text)
}

.modal-content {
    background-color: var(--color-surface-raised);
    border-color: var(--color-border);
    border-radius: 0
}

.table {
    --bs-table-bg: var(--color-surface);
    --bs-table-striped-bg: var(--color-surface-alt);
    color: var(--color-text);
    border-color: var(--color-border)
}

.table>:not(caption)>*>* {
    border-bottom-color: var(--color-border)
}

::-webkit-scrollbar {
    width: 3px;
    height: 3px
}

::-webkit-scrollbar-track {
    background: var(--color-surface-alt)
}

::-webkit-scrollbar-thumb {
    background: var(--color-scrollbar)
}