* {
  box-sizing: border-box;
}

html {
  height: 100%;
  background-color: var(--body-bg, hsl(220, 20%, 98%));
}

body.default {
  --body-bg: #fafbfc;
  --text: #2d3748;
  --text-muted: #718096;
  --heading: #1a202c;
  --body-bg-left: #e2e8f0;
  --body-bg-right: #f7fafc;
  --body-bg-content: #ffffff;
  --navbar: #3182ce;
  --navbar-hover: #2b6cb0;
  --nav-link: #ffffff;
  --nav-link-hover: #f7fafc;
  --primary: #3182ce;
  --primary-hover: #2b6cb0;
  --secondary: #718096;
  --secondary-hover: #4a5568;
  --success: #38a169;
  --success-hover: #2f855a;
  --warning: #d69e2e;
  --warning-hover: #b7791f;
  --danger: #e53e3e;
  --danger-hover: #c53030;
  --card-bg: #ffffff;
  --modal-bg: #ffffff;
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --border-color: #e2e8f0;
  --border-color-hover: #cbd5e0;
  --input-bg: #ffffff;
  --input-border: #e2e8f0;
  --input-border-focus: #3182ce;
  --input-text: #2d3748;
  --input-placeholder: #a0aec0;
  --table-header-bg: #f7fafc;
  --table-header-text: #1a202c;
  --table-row-bg: #ffffff;
  --table-row-alt-bg: #f7fafc;
  --table-row-hover-bg: #edf2f7;
  --table-border: #e2e8f0;
  --status-online: #38a169;
  --status-offline: #718096;
  --status-busy: #e53e3e;
  --status-away: #d69e2e;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --footer-bg: #f7fafc;
  --footer-text: #2d3748;
  --footer-link: #3182ce;
  --footer-link-hover: #2b6cb0;
}

body.jocko {
  --body-bg: #1a1a1a;
  --text: #e2e8f0;
  --text-muted: #a0aec0;
  --heading: #f7fafc;
  --body-bg-left: #2d2d2d;
  --body-bg-right: #1a1a1a;
  --body-bg-content: #2a2a2a;
  --navbar: #2d3748;
  --navbar-hover: #4a5568;
  --nav-link: #e2e8f0;
  --nav-link-hover: #f7fafc;
  --primary: #4299e1;
  --primary-hover: #3182ce;
  --secondary: #a0aec0;
  --secondary-hover: #cbd5e0;
  --success: #48bb78;
  --success-hover: #38a169;
  --warning: #ed8936;
  --warning-hover: #d69e2e;
  --danger: #f56565;
  --danger-hover: #e53e3e;
  --card-bg: #2d2d2d;
  --modal-bg: #2d2d2d;
  --overlay-bg: rgba(0, 0, 0, 0.7);
  --border-color: #4a5568;
  --border-color-hover: #718096;
  --input-bg: #2d2d2d;
  --input-border: #4a5568;
  --input-border-focus: #4299e1;
  --input-text: #e2e8f0;
  --input-placeholder: #718096;
  --table-header-bg: #374151;
  --table-header-text: #f7fafc;
  --table-row-bg: #2d2d2d;
  --table-row-alt-bg: #374151;
  --table-row-hover-bg: #4a5568;
  --table-border: #4a5568;
  --status-online: #48bb78;
  --status-offline: #a0aec0;
  --status-busy: #f56565;
  --status-away: #ed8936;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
  --footer-bg: #1a1a1a;
  --footer-text: #e2e8f0;
  --footer-link: #4299e1;
  --footer-link-hover: #63b3ed;
}

body {
  background-color: var(--body-bg);
  color: var(--text);
  --th-table: var(--table-header-bg);
  --tr-table: var(--table-row-alt-bg);
  --alert-success-bg: color-mix(in srgb, var(--success) 15%, transparent);
  --alert-success-text: var(--success);
  --alert-danger-bg: color-mix(in srgb, var(--danger) 15%, transparent);
  --alert-danger-text: var(--danger);
  --badge-bg: var(--card-bg);
  --badge-text: var(--text);
}

.theme-bg-primary {
  background-color: var(--primary) !important;
}

.theme-bg-secondary {
  background-color: var(--secondary) !important;
}

.theme-bg-success {
  background-color: var(--success) !important;
}

.theme-bg-warning {
  background-color: var(--warning) !important;
}

.theme-bg-danger {
  background-color: var(--danger) !important;
}

.theme-text-primary {
  color: var(--primary) !important;
}

.theme-text-secondary {
  color: var(--secondary) !important;
}

.theme-text-success {
  color: var(--success) !important;
}

.theme-text-warning {
  color: var(--warning) !important;
}

.theme-text-danger {
  color: var(--danger) !important;
}

.theme-text-muted {
  color: var(--text-muted) !important;
}

.theme-border-primary {
  border-color: var(--primary) !important;
}

.theme-border-secondary {
  border-color: var(--border-color) !important;
}