:root {
  --ui-bg: #f7f8fa;
  --ui-surface: #ffffff;
  --ui-surface-2: #f3f4f6;
  --ui-border: #e5e7eb;
  --ui-text: #0f172a;
  --ui-muted: #64748b;
  --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --ui-shadow-md: 0 10px 30px rgba(15, 23, 42, 0.10);
  --ui-radius-md: 12px;
  --ui-radius-lg: 16px;
}

.ui-surface {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-sm);
}

.ui-muted {
  color: var(--ui-muted);
}

.ui-pill {
  border-radius: 999px;
}

.btn-brown {
  --bs-btn-color: #fff;
  --bs-btn-bg: #8b4513;
  --bs-btn-border-color: #8b4513;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #7a3c10;
  --bs-btn-hover-border-color: #7a3c10;
  --bs-btn-focus-shadow-rgb: 139, 69, 19;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #6a340e;
  --bs-btn-active-border-color: #6a340e;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #8b4513;
  --bs-btn-disabled-border-color: #8b4513;
}

.page-header.page-header-main {
  background: linear-gradient(135deg, #198754, #146c43);
}

.page-header.page-header-extra {
  background: linear-gradient(135deg, #ffc107, #e0a800);
}

.page-header.page-header-tobacco {
  background: linear-gradient(135deg, #8b4513, #6f3b14);
}

.page-header h1,
.page-header p {
  color: #fff;
}