/* Theme variables */

:root {
  color-scheme: dark;
  --shop-bg: #09090f;
  --shop-card: #12121c;
  --shop-card-soft: #1c1b2b;
  --shop-border: #2e2b45;
  --shop-accent: #3b82f6;
  --shop-accent-dark: #2563eb;
  --shop-muted: #a1a1aa;
  --shop-navbar-bg: #12121c;
  --shop-main-bg: var(--shop-card);
  --shop-main-navbar-bg: var(--shop-card);
  --shop-tab-hover-bg: #1f2937;
  --shop-table-header-bg: var(--shop-card-soft);
  --shop-order-header-bg: var(--shop-card-soft);
  --shop-total-bg: var(--shop-card-soft);
  --shop-disabled-bg: #202030;
  --shop-disabled-text: #71717a;
  --bs-body-bg: var(--shop-bg);
  --bs-body-color: #e5e7eb;
  --bs-secondary-color: var(--shop-muted);
  --bs-tertiary-color: #71717a;
  --bs-border-color: var(--shop-border);
  --bs-link-color: #93c5fd;
  --bs-link-hover-color: #bfdbfe;
  --bs-heading-color: #f8fafc;
  --bs-emphasis-color: #ffffff;
  --bs-card-bg: var(--shop-card);
  --bs-card-color: var(--bs-body-color);
}

/* Page shell */

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: var(--bs-body-color);
  background:
    radial-gradient(
      circle at top left,
      rgba(59, 130, 246, 0.12),
      transparent 32rem
    ),
    radial-gradient(
      circle at bottom right,
      rgba(139, 92, 246, 0.1),
      transparent 36rem
    ),
    var(--shop-bg);
}

body > main {
  flex: 1 0 auto;
}