:root {
    color-scheme: light;
    --bg-color: #f6f8fb;
    --surface-color: #ffffff;
    --surface-muted: #f0f4f8;
    --text-color: #1f2937;
    --text-muted: #64748b;
    --border-color: #dbe3ed;
    --primary-color: #2563eb;
    --primary-contrast: #ffffff;
    --success-color: #0f9f6e;
    --warning-color: #d97706;
    --danger-color: #dc2626;
    --info-color: #0891b2;
    --shadow-color: 30 41 59;
    --shadow-soft: 0 16px 40px rgb(var(--shadow-color) / 0.08);
    --shadow-card: 0 8px 24px rgb(var(--shadow-color) / 0.08);
    --radius: 8px;
    --transition: 180ms ease;
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg-color: #111318;
    --surface-color: #1a1d24;
    --surface-muted: #232833;
    --text-color: #f8fafc;
    --text-muted: #a7b0bf;
    --border-color: #303643;
    --primary-color: #6ea8fe;
    --primary-contrast: #08111f;
    --success-color: #5ee0aa;
    --warning-color: #f7bd53;
    --danger-color: #fb7185;
    --info-color: #67e8f9;
    --shadow-color: 0 0 0;
    --shadow-soft: 0 16px 40px rgb(var(--shadow-color) / 0.28);
    --shadow-card: 0 8px 24px rgb(var(--shadow-color) / 0.24);
}

* {
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition);
}

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

.btn-primary {
    --bs-btn-bg: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-color: var(--primary-contrast);
    --bs-btn-hover-bg: color-mix(in srgb, var(--primary-color) 86%, #000000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--primary-color) 86%, #000000);
}

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

.form-control:focus,
.form-select:focus {
    background: var(--surface-color);
    color: var(--text-color);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-color);
    --bs-table-border-color: var(--border-color);
}