:root {
  --brand-50: #fffbeb;
  --brand-100: #fef3c7;
  --brand-300: #fcd34d;
  --brand-500: #f59e0b;
  --brand-600: #d97706;
  --brand-700: #b45309;
  --ink-950: #020617;
  --ink-900: #0f172a;
  --ink-700: #334155;
  --ink-500: #64748b;
  --surface: #ffffff;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
}

body {
  color: var(--ink-900);
  background: #f8fafc;
}

.brand-heading {
  letter-spacing: -0.02em;
  color: var(--ink-950);
}

.brand-muted {
  color: var(--ink-500);
}

.brand-panel {
  border: 1px solid rgb(226 232 240 / 0.9);
  border-radius: var(--radius-2xl);
  background: var(--surface);
  box-shadow: 0 16px 48px -28px rgb(15 23 42 / 0.35);
}

.brand-panel-dark {
  border: 1px solid rgb(51 65 85 / 0.55);
  border-radius: var(--radius-2xl);
  background: linear-gradient(180deg, rgb(15 23 42 / 0.9), rgb(2 6 23 / 0.92));
  box-shadow: 0 20px 50px -30px rgb(2 6 23 / 0.9);
}

.brand-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgb(251 191 36 / 0.35);
  background: rgb(251 191 36 / 0.1);
  color: var(--brand-700);
  padding: 0.2rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.brand-btn-primary {
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  color: #fff;
  font-weight: 600;
  box-shadow: 0 10px 24px -14px rgb(180 83 9 / 0.9);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

.brand-btn-primary:hover {
  filter: brightness(0.98);
  box-shadow: 0 16px 28px -16px rgb(180 83 9 / 0.95);
}

.brand-btn-primary:active {
  transform: translateY(1px);
}

.brand-btn-ghost {
  border: 1px solid rgb(203 213 225 / 0.9);
  border-radius: var(--radius-xl);
  background: rgb(248 250 252 / 0.95);
  color: var(--ink-700);
  transition: all 120ms ease;
}

.brand-btn-ghost:hover {
  border-color: rgb(251 191 36 / 0.6);
  background: rgb(255 251 235 / 0.8);
  color: var(--brand-700);
}

.brand-input {
  border: 1px solid rgb(203 213 225);
  border-radius: 0.8rem;
  background: #fff;
  color: var(--ink-900);
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.brand-input:focus {
  border-color: rgb(217 119 6);
  box-shadow: 0 0 0 3px rgb(251 191 36 / 0.22);
}

.brand-table th {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-500);
}