/* Theme CSS variables for tenant branding */
:root {
  --brand-primary: #2563eb;
  --brand-text-primary: #ffffff;
  --brand-background: #ffffff;
  --brand-hover: #1d4ed8;
  --brand-secondary: #334155;
  --surface: #ffffff;
  --border: #e5e7eb;
  --radius: 18px;

  /* Developer-specific variables (dynamically set by Rails) */
  --developer-primary-color: #7C3AED;
  --developer-primary-text-color: #ffffff;
  --developer-gradient: linear-gradient(135deg, #7C3AED 0%, #4F46E5 100%);
}

/* Classes that consume theme CSS variables to minimize template changes */
.btn { border-radius: var(--radius); }
.btn-primary { background: var(--brand-primary); color: var(--brand-text-primary); }
.btn-primary:hover { background: var(--brand-hover); }

.card, .panel, .box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }

.border-primary { border-color: var(--brand-primary) !important; }
.bg-primary { background-color: var(--brand-primary) !important; }
.bg-surface { background-color: var(--surface) !important; }
.text-secondary { color: var(--brand-secondary) !important; }

input, select, textarea { border: 1px solid var(--border); border-radius: var(--radius); }

body {
  background-color: var(--brand-background);
}

.link-primary {
  color: var(--brand-primary);
}

.link-primary:hover {
  color: #1d4ed8;
}