/* Otloble SaaS Platform - Multi-Tenant Dynamic Theme Override Stylesheet */

:root {
  --tenant-primary: var(--primary-terracotta, #cc805f);
  --tenant-secondary: var(--secondary-teal, #557274);
  --tenant-bg: #fdfbf7;
  --tenant-card-bg: #ffffff;
  --tenant-text: #2c2523;
  --tenant-accent: #e07a5f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tenant-bg: #1a1a1d;
    --tenant-card-bg: #202124;
    --tenant-text: #f9f6f0;
  }
}

/* Primary color dynamic elements */
.btn-primary,
.primary-bg,
.badge-primary,
.cart-badge,
.hero-cta {
  background-color: var(--tenant-primary) !important;
  border-color: var(--tenant-primary) !important;
}

.text-primary,
.tenant-brand-color,
.category-tab.active {
  color: var(--tenant-primary) !important;
}

/* Secondary color dynamic elements */
.btn-secondary,
.secondary-bg {
  background-color: var(--tenant-secondary) !important;
  border-color: var(--tenant-secondary) !important;
}

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

/* Sketch border and shadow preservation for tenant storefront */
.sketch-card {
  border: var(--border-sketch, 2.5px solid #2c2523);
  border-radius: var(--radius-sketch-1, 255px 15px 225px 15px/15px 225px 15px 255px);
  box-shadow: var(--shadow-sketch, 4px 4px 0px #2c2523);
  background-color: var(--tenant-card-bg);
}