:root {
  --primary-50: #fff3eb;
  --primary-100: #ffe0cc;
  --primary-500: #f97316;
  --primary-600: #ea580c;
  --primary-700: #c2410c;
  --neutral-0: #ffffff;
  --neutral-50: #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e1;
  --neutral-500: #64748b;
  --neutral-700: #334155;
  --neutral-900: #0f172a;
  --success-50: #ecfdf5;
  --success-600: #059669;
  --warning-50: #fffbeb;
  --warning-600: #d97706;
  --danger-50: #fef2f2;
  --danger-600: #dc2626;
  --info-50: #eff6ff;
  --info-600: #2563eb;
  --shadow-soft: 0 18px 50px rgba(15, 23, 42, 0.08);
  --shadow-pop: 0 28px 70px rgba(15, 23, 42, 0.18);
  --font-ui: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background:
    radial-gradient(circle at 12% 12%, rgba(249, 115, 22, 0.09), transparent 32rem),
    radial-gradient(circle at 92% 16%, rgba(37, 99, 235, 0.08), transparent 28rem),
    var(--neutral-50);
  color: var(--neutral-900);
  font-family: var(--font-ui);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  text-rendering: geometricPrecision;
}

strong,
.product-price,
.cart-bar-copy strong,
.summary-row strong,
.kpi-card strong,
.stat-card strong,
.receipt-line strong,
.align-right,
td.align-right,
.bar,
.rank-index {
  font-variant-numeric: tabular-nums;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

img {
  display: block;
  max-width: 100%;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.brand-lockup,
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand-lockup strong,
.sidebar-brand strong {
  display: block;
  font-size: 14px;
  font-weight: 900;
}

.brand-lockup span,
.sidebar-brand span {
  display: block;
  color: var(--neutral-500);
  font-size: 12px;
  font-weight: 700;
  margin-top: 2px;
}

.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--neutral-900);
  color: var(--neutral-0);
  font-size: 13px;
  font-weight: 900;
}

.brand-mark.small {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 11px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--neutral-500);
  font-size: 12px;
  font-weight: 800;
  min-height: 34px;
  padding: 0 12px;
}

.filter-chip.active {
  background: var(--neutral-0);
  color: var(--neutral-900);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

.toolbar-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.status-pill.success {
  background: var(--success-50);
  color: var(--success-600);
}

.status-pill.warning {
  background: var(--warning-50);
  color: var(--warning-600);
}

.status-pill.neutral {
  background: var(--neutral-100);
  color: var(--neutral-500);
}

.status-pill.danger {
  background: var(--danger-50);
  color: var(--danger-600);
}

.status-pill.info {
  background: var(--info-50);
  color: var(--info-600);
}

.status-pill svg {
  width: 14px;
  height: 14px;
}

.eyebrow {
  display: block;
  color: var(--neutral-500);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.primary-button,
.secondary-button,
.danger-button,
.ghost-button,
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 900;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.primary-button {
  background: var(--primary-600);
  color: var(--neutral-0);
  box-shadow: 0 12px 24px rgba(234, 88, 12, 0.24);
}

.primary-button:hover {
  background: var(--primary-700);
}

.primary-button:disabled,
.checkout-submit:disabled {
  background: var(--neutral-300);
  color: rgba(255, 255, 255, 0.82);
  box-shadow: none;
}

.primary-button:disabled:hover,
.checkout-submit:disabled:hover {
  background: var(--neutral-300);
}

.secondary-button {
  border-color: var(--neutral-200);
  background: var(--neutral-0);
  color: var(--neutral-700);
}

.danger-button {
  background: var(--danger-50);
  color: var(--danger-600);
}

.ghost-button {
  background: transparent;
  color: var(--neutral-500);
}

.icon-button {
  width: 40px;
  padding: 0;
  border-color: var(--neutral-200);
  background: var(--neutral-0);
  color: var(--neutral-700);
}

.primary-button:active,
.secondary-button:active,
.danger-button:active,
.ghost-button:active,
.icon-button:active,
.product-card:active,
.nav-item:active {
  transform: translateY(1px);
}

.primary-button svg,
.secondary-button svg,
.danger-button svg,
.ghost-button svg,
.icon-button svg {
  width: 16px;
  height: 16px;
}